@import '../helpers/helpers';

.actions {
  margin-bottom: 20px;

  &__link {
    width: 100%;
    text-decoration: none;

    @include media-breakpoint-up(lg) {
      margin-right: 30px;

      &:last-of-type {
        margin-right: 0;
      }
    }

    &:hover {
      text-decoration: none;
    }
  }

  &__button {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 55px;
    border: 1px solid $gray;
    border-radius: 3px;
    margin-right: 30px;

    @include media-breakpoint-down(md) {
      margin-top: 10px;
    }
    @include media-breakpoint-only(lg) {
      height: 60px;
    }

    &:last-of-type {
      margin-right: 0;
    }

    &:hover {
      border: 1px solid $gray-dark;

      .actions__title {
        color: $gray-dark;
      }
    }
  }

  &__title {
    padding: 0 45px 0 10px;
    font-weight: 500;
    font-size: .875rem;
    color: $gray-dark;

    &::before {
      color: $blue;
      content: '+';
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      font-size: 1.77rem;
      line-height: 19px;
      font-weight: 500;
    }

    &-thin {
      font-weight: 400;
    }

    &-big {
      font-weight: 500;
      font-size: 1.25rem;
      color: $gray-dark;

      @include media-breakpoint-down(sm) {
        display: flex;
        align-items: center;
        padding-right: 50px;
      }
    }
  }

  &__text {

    &-big {
      @include media-breakpoint-down(sm) {
        display: block;
        line-height: 24px;
      }
    }
  }

  &__icon {
    font-weight: 900;
    color: $warm-grey;
    font-size: 1rem;
    margin-right: $btn-padding-y;

    &-big {
      font-size: 2.25rem;
      vertical-align: -25%;
      margin-right: 25px;

      @include media-breakpoint-down(sm) {
        font-size: 1.5rem;
        display: block;
      }
    }
  }

  &__modal-padding {
    padding-right: 40px;
    padding-left: 40px;

    @include media-breakpoint-down(sm) {
      padding-right: 15px;
      padding-left: 15px;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  &__component.actions__component {
    padding-bottom: 30px;

    @include media-breakpoint-down(sm) {
      padding-top: 20px;
      padding-bottom: 20px;
    }

  }

  &__content {

    &-list {
      display: inline-block;
      list-style-type: none;

      @include media-breakpoint-down(sm) {
        padding-left: 0;
        padding-right: 10px;
      }


      &:first-of-type {
        padding-left: 0;
      }
    }
  }
}

.pdp {

  &__aside {

    > .actions__link {

      @include media-breakpoint-up(lg) {
        display: none;
      }
    }
  }

  &__actions {

    > .actions__link {

      @include media-breakpoint-down(md) {
        display: none;
      }
    }
  }
}

