@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-header {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  height: $header-height-mobile;
  width: 100%;
  background: $olive;
  color: $white;
  z-index: 200;

  .header-wrapper {
    display: flex;
    position: relative;

    .hamburger {
      display: flex;
      margin-right: 20px;
    }

    .actions {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);

      .icon {
        position: relative;
        margin: 0 5px;
        padding: 0;
        background: none;
        border: none;
        color: $white;
        font-size: $font-24;

        .qty {
          position: absolute;
          top: -5px;
          right: -5px;
          height: 15px;
          width: 15px;
          border-radius: 50%;
          background: $orange;
          color: $white;
          font-size: $font-12;
          line-height: $font-16;
          font-family: $font-sans;
        }
      }
    }

    .menu {
      display: none;
      list-style: none;
      margin: 0;
      padding: 0;

      .item {
        display: flex;
        color: $white;
        margin: auto 20px;
        font-size: $font-20;
        letter-spacing: 2px;

        .label {
          color: $white;
        }

        &.active {
          border-bottom: 2px solid $white;
        }

        &.disabled {
          .label {
            color: $white-alpha;
          }
        }
      }
    }

    .sidebar-menu {
      position: fixed;
      top: $header-height-mobile;
      left: 0;
      height: calc(100vh - #{$header-height-mobile});
      background: $olive;
      display: block;
      list-style: none;
      margin: 0;
      padding: 0;
      transform: translateX(-100%);
      transition: transform .3s;

      .item {
        display: block;
        color: $white;
        margin: 20px;
        font-size: $font-20;
        letter-spacing: 2px;
        padding: 20px;
        border-bottom: 1px dotted $gray;

        .label {
          color: $white;
        }

        &.active {
          //border-bottom: 2px solid $white;
        }

        &.disabled {
          .label {
            color: $white-alpha;
          }
        }
      }

      &.active {
        transform: translateX(0%);
      }
    }
  }
}




@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-header {
    height: $header-height;

    .header-wrapper {
      .actions {
        position: absolute;
        right: 0;

        .icon {
          margin: 0 5px;
          font-size: $font-30;

          .qty {
            position: absolute;
            top: -15px;
            right: -15px;
            height: 25px;
            width: 25px;
            font-size: $font-20;
            line-height: $font-24;
          }
        }
      }

      .menu {
        display: flex;
      }

      .sidebar-menu {
        top: $header-height;
        height: calc(100vh - #{$header-height});
      }
    }
  }
}