@import '../../styles/_main';

$size: 80px;

.ActionButton {
  $r: &;

  display: none;
  align-items: center;
  color: $c_white;
  cursor: pointer;

  &--on-black {
    color: $c_white;

    #{$r}__button {
      background-color: $c_blue-ribbon;
    }
  }

  &--on-white {
    color: $c_ebony-clay;

    #{$r}__button {
      background-color: $c_blue-ribbon;
    }
  }

  &--on-blue {
    #{$r}__button {
      background-color: $c_black;
    }
  }

  &__text {
    margin-right: 32px;
    font-family: $font-primary;
    font-size: 20px;
    text-transform: uppercase;
  }

  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $size;
    height: $size;
    background-color: $c_blue-ribbon;
    border-radius: 50%;
  }

  &__arrow {
    color: $c_white;

    &--top {
      transform: rotate(180deg);
    }
  }
}

@media #{$screen-md} {
  .ActionButton {
    display: flex;
  }
}
