@import '~styles/config';

.bar {
  @include colorify('background-color');

  display: flex;
  justify-content: space-between;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 18;

  width: 100%;

  height: $sticky-height;

  background-color: #fff;
  box-shadow: 0 -5px 70px 0 rgba(32, 32, 32, 0.1);

  padding: 0 $gutter;

  @media (min-width: $min-tablet) {
    padding: 0 50px;
    left: 266px;
    width: calc(100% - 266px);
  }

  @media (min-width: $min-desktop) {
    padding: 0 70px;
    left: 266px;
    width: calc(100% - 266px);
  }

  &.invertedFont {
    color: #fff;
  }

  &__options {
    display: flex;
    flex: 1;
    justify-content: space-between;

    @media (min-width: $min-1440) {
      @include container;
    }

    .button & {
      @media (max-width: $max-1440) {
        margin-right: 0;
      }
    }

    .alignRight & {
      justify-content: flex-end;
    }
  }

  &__button {
    @include reset-button;
    @include responsive-font(16, 18);
    @include colorify('background-color');

    width: 250px;

    cursor: pointer;

    font-family: $font-heading;
    font-weight: 700;
    color: #fff;

    transition: background-color 300ms ease-in-out;

    @media (min-width: $min-1440) {
      position: absolute;
      right: 0;
      height: 100%;
    }

    &:hover,
    &:focus {
      @include buttons-hover;
    }

    &.disabled {
      pointer-events: none;

      background-color: #aaa;
    }

    &.loading {
      @include loading;
    }
    @keyframes fade {
      0% { background-position: center center, left center; }
      25% { background-position: center center, right center; }
      50% { background-position: center center, left center; }
      75% { background-position: center center, right center; }
      100% { background-position: center center, left center; }
    }

  }

  &__arrowRight {
    margin-left: 10px;

    fill: $color-white;
  }
}