$bottom-sheet-horizontal-padding: 2 * $baseline-grid !default;
$bottom-sheet-vertical-padding: 1 * $baseline-grid !default;
$bottom-sheet-icon-after-margin: 4 * $baseline-grid !default;
$bottom-sheet-list-item-height: 6 * $baseline-grid !default;
$bottom-sheet-hidden-bottom-padding: 80px !default;
$bottom-sheet-header-height: 7 * $baseline-grid !default;
$bottom-sheet-grid-font-weight: 300 !default;

md-bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: $bottom-sheet-vertical-padding $bottom-sheet-horizontal-padding $bottom-sheet-vertical-padding + $bottom-sheet-hidden-bottom-padding $bottom-sheet-horizontal-padding;
  z-index: $z-index-bottom-sheet;

  border-top: 1px solid;

  transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0);
  transition: $swift-ease-out;
  transition-property: transform;

  &.md-has-header {
    padding-top: 0;
  }

  &.ng-enter {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  &.ng-enter-active {
    opacity: 1;
    display: block;
    transform: translate3d(0, $bottom-sheet-hidden-bottom-padding, 0) !important;
  }


  &.ng-leave-active {
    transform: translate3d(0, 100%, 0) !important;
    transition: $swift-ease-in;
  }

  .md-subheader {
    background-color: transparent;
    font-family: $font-family;
    line-height: $bottom-sheet-header-height;
    padding: 0;
    white-space: nowrap;
  }

  md-inline-icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    fill: #444;
  }

  md-item {
    display: flex;
    outline: none;

    &:hover {
      cursor: pointer;
    }
  }

  &.md-list {
    md-item {
      align-items: center;
      height: $bottom-sheet-list-item-height;

      div.md-icon-container {
        display: inline-block;
        height: 3 * $baseline-grid;
        margin-right: $bottom-sheet-icon-after-margin;
      }
    }
  }



  &.md-grid {
    padding-left: 3 * $baseline-grid;
    padding-right: 3 * $baseline-grid;
    padding-top: 0;

    md-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      transition: all 0.5s;
      align-items: center;
    }

    md-item {
      flex-direction: column;
      align-items: center;
      transition: all 0.5s;

      height: 12 * $baseline-grid;

      margin-top: $baseline-grid;
      margin-bottom: $baseline-grid;

      /* Mixin for how many grid items to show per row */
      @mixin grid-items-per-row($num, $alignEdges: false) {
        $width: 100% / $num;
        flex: 1 1 $width;
        max-width: $width;

        @if $alignEdges {
          &:nth-of-type(#{$num}n + 1) {
            align-items: flex-start;
          }
          &:nth-of-type(#{$num}n) {
            align-items: flex-end;
          }
        }
      }
      
      @media screen and (max-width: $layout-breakpoint-sm) {
        @include grid-items-per-row(3, true);
      }

      @media screen and (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
        @include grid-items-per-row(4);
      }

      @media screen and (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
        @include grid-items-per-row(6);
      }

      @media screen and (min-width: $layout-breakpoint-lg) {
        @include grid-items-per-row(7);
      }



      .md-item-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 6 * $baseline-grid;
        padding-bottom: 2 * $baseline-grid;
      }

      .md-grid-item-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 10 * $baseline-grid;
      }

      .md-icon-container {
        display: inline-block;
        box-sizing: border-box;
        height: 6 * $baseline-grid;
        width: 6 * $baseline-grid;
        margin: 0 0;
      }

      p.md-grid-text {
        font-weight: $bottom-sheet-grid-font-weight;
        line-height: 2 * $baseline-grid;
        font-size: 2 * $baseline-grid - 3;
        margin: 0;
        white-space: nowrap;
        width: 8 * $baseline-grid;
        text-align: center;
        padding-top: 1 * $baseline-grid;
      }
    }
  }
}