@import '~styles/config';

.link {
  display: block;
  margin-top: $gutter*0.5;
  cursor: pointer;

  &.smaller {
    font-size: 12px;
  }

  &.underForm {
    @media (min-width: $min-tablet) {
      margin-top: 0;
    }
  }

  &.paddingLeft {
    padding-left: 20px;
    @media (min-width: $min-desktop) {
      padding-left: 120px;
    }
  }

  &.paddingBottom {
    padding-bottom: 20px;
  }

  a { // stylelint-disable-line
    @include reset-anchor;
    display: flex;
    flex-direction: row;
  }

  &__icon {
    @include colorify('fill');

    margin-right: 20px;
    height: 23px;

    .inverted & {
      fill: #fff;
    }

    .smaller & {
      margin-right: 10px;
      svg { // stylelint-disable-line
        max-height: 12px;
      }
    }

    svg { // stylelint-disable-line
      max-height: 23px;
    }
  }

  &__content {
    color: $color-dark;

    @include colorify();

    .inverted & {
      color: #fff;
    }

    &.underline {
      text-decoration: underline;
    }
  }
}