@import '~styles/config';

.benefit {
  background-color: #fff;
  box-shadow: 0px 0.7px 2.7px rgba(0, 0, 0, 0.005), 0px 3.4px 6.8px rgba(0, 0, 0, 0.013),
    0px 8.7px 13.8px rgba(0, 0, 0, 0.023), 0px 18.2px 28.5px rgba(0, 0, 0, 0.035),
    0px 42px 78px rgba(0, 0, 0, 0.05);

  &__button {
    @include reset-button;

    display: grid;
    grid-template-columns: 40px 250px 250px auto 18px;
    grid-template-rows: auto;
    align-items: center;

    padding: $gutter;

    width: 100%;

    cursor: pointer;
  }

  &__logo {
    width: 40px;
    height: 40px;

    border-radius: 4px;
  }

  &__title {
    @include reset-all;
    @include responsive-font(16, 18);

    margin-left: $gutter;

    text-align: left;
    font-weight: 600;

    color: $color-dark;
  }

  &__subtitle {
    @include reset-all;
    @include responsive-font(16, 18);

    text-align: left;
  }

  &__tag {
    @include reset-all;

    display: inline-flex;

    margin-left: auto;
    margin-right: 25px;
    padding: 6px 14px;

    font-weight: 600;
    font-size: 16px;

    border: 1px solid #e0e0e0;
    border-radius: 4px;

    span {
      padding-right: 4px;

      color: $color-pink;
    }
  }

  &__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    transform-origin: 50% 50%;
    transform: rotate(0deg);

    svg {
      position: relative;

      top: 1px;
    }
  }

  &__details {
    display: none;

    border-top: 1px solid #eee;

    will-change: padding, height, opacity;
  }
}