Boxes

@mixin component-box {
  border-radius: $minor-border-radius;
  padding: $base-spacing-medium;
  background-color: $panel-primary;
  box-shadow: $base-box-shadow;
}

// Sticky Box - A component box that is fixed to one side of the viewport. Used for buy boxes and may be used for other calls to action
@mixin sticky-box($breakpoint: $small-screen-max, $side: right, $z-index: 1) {
  @include component-box;
  @include container-edge-calc(right);
  box-shadow: $base-box-shadow;
  position: fixed;
  z-index: $z-index;

  @media only screen and (max-width: $breakpoint) {
    position: static !important; // !importants overrride the sticky_box.js behavior on small screens
    margin: auto !important;
  }

  p {
    font-size: $font-size-small;
  }
}

// Call to action box with gradient background and text
@mixin cta-box($gradient: $cb) {
  border-radius: $minor-border-radius;
  padding: $base-spacing-medium;
  @include gradient(map-get($gradient, dark), map-get($gradient, medium), map-get($gradient, light));
}

// Ecom Table Boxes
@mixin ecom_table-item {
  border-bottom: $base-border;
  margin-top: $base-margin * 2; // TODO should be $base-spacing-medium now but not yet touching Ecom

  .ecom__column-item_flag {
    @include column-flag;
  }

  .ecom__column-item-box {
    width: 100%;
    text-align: center;
    border: $base-border;
    border-radius: $minor-border-radius;
    border-top: none;

    .ecom__column-item-box--header {
      @include cbGradient;
      color: white;
      padding-top: $base-margin;
      padding-bottom: $base-margin;
      margin-bottom: 0;
    }

    .ecom__column-item-box--price {
      color: $azure-blue;
      font-weight: $font-weight-bold;
      padding-top: $base-margin;
      padding-bottom: $base-margin;

      span {
        font-size: $font-size-large;
      }
    }

    .ecom__column-item-box--list {
      background-color: $grey-lightest;

      li {
        list-style-type: none;
        margin: auto;
        padding-top: $base-margin;
        padding-bottom: $base-margin;
        border-top: $base-border;
        width: 90%;
        color: $text-color-dark;

        .ecom__dashed-price {
          text-decoration: line-through;
        }

        .ecom__value-price {
          color: $text-highlight;
        }
      }
    }
  }

  .ecom__column-item_buy-button {
    margin-top: $base-margin;
    margin-bottom: $base-margin * 2;

    a {
      width: 100%;
    }
  }
}

// Item Bar

$_item-bar-breakpoint: 46.8em; // ~750px

@mixin item-bar__container {
  border-top: $base-border;
  border-bottom: $base-border;
  background-color: $panel-primary;
  height: 9.0625rem; // 145px;
  display: flex;
  align-items: center;

  @media only screen and (max-width: $_item-bar-breakpoint) {
    height: auto;
  }
}

@mixin item-bar__list($breakpoint: $small-screen-max) {
  @include display(flex);
  @include justify-content(center);
  padding: $base-spacing-medium 0;

  @media only screen and (max-width: $breakpoint) {
    @include flex-direction(column);
    padding: 0;
  }
}

@mixin item-bar__list-item($breakpoint: $small-screen-max) {
  position: relative;
  border-right: $base-border;
  padding: 0 $base-spacing-medium;
  text-align: center;
  list-style-type: none;

  @media only screen and (max-width: $breakpoint) {
    border-right: 0;
    padding: $base-spacing-small 0;

    &:after {
      content: '';
      height: 1px;
      width: 100px;
      border-bottom: $base-border;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &:last-child {
    border: 0;

    &:after {
      content: none;
      display: none;
    }
  }
}