$roboto-font-path: "../fonts/";
$icons-font-path: $roboto-font-path;

$font-size-action-icon: 18px;
$header-height: 60px;
$transition-duration: .2s;

@import "materialize-sass-origin/sass/materialize";
@import "select2/src/scss/core";
//@import "vendor/basic";
@import "dropzone/dist/dropzone";

.header {
  @media (min-width: $large-screen-up) {
    margin-left: 240px;
  }

  .top-nav {
    box-shadow: none;
    height: $header-height;
    margin-bottom: $gutter-width;

    .container {
      height: 100%;
    }

    .header-button {
      float: left;
      margin-right: $gutter-width;

      @media (min-width: $medium-screen-up) {
        display: none;
      }

      i {
        font-size: 2.7rem;
        height: $header-height;
        line-height: $header-height;
      }
    }

    .dropdown-button {
      float: right;
      line-height: $header-height/2;
      position: relative;
      top: $header-height/4;

      i {
        height: $header-height/2;
        line-height: $header-height/2;
      }
    }

    .dropdown-content {
      left: auto !important;
      right: 0;
      white-space: nowrap;
    }
  }

  .side-nav {
    padding-top: $header-height;

    li {
      display: block;
      padding: 0;

      &:after {
        @extend .divider;
        content: "";
        display: block;
      }

      li:after {
        content: none;
      }

      .body-home &.nav-home {
        @extend .active;
      }

      @each $submodule in (products, attributes, categories, orders, payments, customers, discounts, vouchers, sales) {
        .body-#{$submodule} &.subnav-#{$submodule} {
          @extend .active;

          a {
            background-color: map_get($materialize-red, lighten-2);
          }
        }
      }

      &.brand-logo {
        top: 0;
        width: 100%;

        &:hover {
          background: none;
        }

        &:after {
          content: none;
        }

        a {
          display: block;
          height: $header-height;
          padding: 0;
          text-align: center;

          img {
            height: 100%;
            padding: 15px 0;
          }
        }
      }

      &.side-nav-user {
        a {
          font-size: 14px;
          line-height: 64px;
          margin: 0;

          i {
            vertical-align: inherit;
            width: auto;
            margin: 0 5px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        ul ul {
          li {
            a {
              line-height: 52px;
            }
          }
        }
      }

      ul ul {
        li {
          a {
            background: map-get($grey, lighten-5);
            height: 52px;
            line-height: 52px;
            padding-left: 30px;
            transition: background-color $transition-duration;

            &:hover, &:focus {
              background-color: #ddd;
            }
          }
        }
      }

      .collapsible-header {
        margin: 0;
      }

      .collapsible-body {
        a {
          margin: 0;
        }
      }

      i {
        display: inline-block;
        float: none;
      }
    }

    > li {
      &:hover {
        background: none;
      }
    }
  }
}

.main {
  @media (min-width: $large-screen-up) {
    margin-left: 240px;
  }
}

.container {
  @media (min-width: $large-screen-up) {
    width: 85%;
  }
}

.modal-content {
  .row {
    margin: {
      left: -.75rem;
      right: -.75rem;
    }
  }
}

.page-title {
  display: block;
  font-size: $h5-fontsize;
  line-height: $header-height;

  @media (max-width: $medium-screen) {
    float: right;
    width: calc(100% - 38px - 1.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

table {
  .row {
    .col {
      float: none;
      padding: $gutter-width/2;

      .responsive-img {
        display: block;
      }
    }
  }
}

.input-with-suffix input {
  float: left;
  width: calc(100% - 40px);
}

.input-text-suffix {
  float: right;
  line-height: 45px;
  text-align: right;
  width: 40px;
}

#modal-product-class {
  max-width: 300px;
}

.pagination li.disabled span {
  color: #999;
}

.btn-data-table {
  background: none;
  border: none;
  font-weight: bold;
  padding: 0;
  text-transform: uppercase;

  &:hover, &:focus {
    background: none;
  }
}

.fixed-action-btn {
  padding: 0;
}

.btn-fab {
  transition: transform $transition-duration, box-shadow $transition-duration;

  i {
    &:before {
      transition: font-size $transition-duration;
    }
  }
}

.btn-fab.btn-fab-hidden {
  transform: scaleX(0) scaleY(0);

  i {
    &:before {
      font-size: 0;
    }
  }
}

.card {
  img {
    display: block;

    @media (max-width: $small-screen) {
      width: 100%;
    }
  }
  overflow: initial;
}

.no-margin {
  margin: 0;
}

.switch-two-columns {
  @media (min-width: $large-screen) {
    float: left !important;

    &:first-child {
      float: right !important;
    }
  }
}

.text-lg {
  font-size: 120%;
}

#order-details {
  .order-summary {
    td {
      padding: 5px 5px;
    }
  }

  #order-notes {
    box-shadow: none;
  }
}

@import "widget/breadcrumbs";
@import "widget/card";
@import "widget/data-table";
@import "widget/dropzone";
@import "widget/form";
@import "widget/list";
@import "widget/product-gallery";
@import "widget/ppoi";
@import "widget/select2";
@import "widget/tabs";
@import "widget/toast";
