@import "@css/base/variables.b2b";

$b2b-panel-bg: $body-bg-alt !default;
$b2b-panel-border: 1px solid $border-color !default;
$b2b-panel-margin: 0 0 35px !default;
$b2b-panel-max-width: 1180px !default;

.b2b-panel {
   background: $b2b-panel-bg;
   margin: $b2b-panel-margin;
   padding: 15px 0;

   @if $b2b-panel-border {
      border: $b2b-panel-border;
   }
}

.b2b-panel-inner {
   display: flex;
   align-items: center;
   max-width: $b2b-panel-max-width;
   margin: 0 auto;

   p {
      margin: 0;
      line-height: $line-height-sm;
      font-size: $font-size-smaller;
      color: $text-muted;
   }
}

.b2b-panel-icon {
   position: relative;
   padding-left: 40px;
   width: 20%;

   .fc {
      position: absolute;
      left: 0;
      top: calc(50% - 12px);
      font-size: 24px;
      color: $text-dark;
   }

   strong {
      display: block;
      font-weight: normal;
      color: $text-dark;
      font-size: $font-size-base;
   }
}

.b2b-panel-menu {
   li:not(:first-child) {
      margin-left: 25px;
   }

   a {
      color: $text-dark;
      font-size: $font-size-base;

      .fc {
         margin-right: 5px;
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .b2b-panel-menu {
      .repeat-order {
         display: none;
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .b2b-panel-inner {
      flex-wrap: wrap;
   }

   .b2b-panel-icon {
      width: 50%;
   }

   .b2b-panel-menu {
      width: 100%;
      margin-top: 20px;

      li:not(:first-child) {
         margin-left: 15px;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .b2b-panel-menu {
      a {
         font-size: $font-size-smaller;
      }

      li:not(:first-child) {
         margin-left: 10px;
      }
   }
}

@media screen and (max-width: $xs - 1) {
   .b2b-panel-icon {
      width: 100%;
      margin-bottom: 20px;
   }

   .b2b-panel-menu {
      margin-top: 0;

      li {
         display: block;

         &:not(:first-child) {
            margin-left: 0;
         }
      }
   }
}
