@use 'sass:math';

@import '~styles/config';

.opportunityButton {
  @include reset-button;
  @include colorify('background-color');

  display: flex;
  align-items: center;

  padding: 15px 7px 15px 15px;
  margin-bottom: math.div($gutter, 3);

  width: 100%;

  cursor: pointer;

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

  &__icon {
    margin-right: $gutter * 0.5;
    width: $gutter;

    svg {
      // stylelint-disable-line
      display: block;

      height: 30px;
      fill: $color-white;
    }
  }

  &__text {
    display: flex;
    flex-direction: column;

    width: calc(100% - #{$gutter * 2.5});

    text-align: left;
  }

  &__label {
    margin-bottom: 5px;

    font-size: 14px;
    line-height: 16px;
    font-weight: 600;

    color: $color-white;
  }

  &__description {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
  }

  &__iconPlus {
    margin-left: $gutter * 0.5;
    width: 30px;
    height: 30px;
  }

  &__svgPlus {
    display: block;

    height: 30px;
    width: 30px;

    fill: $color-white;
  }
}