@use "vars";
@use "mixins";

.btn {
  @include mixins.font-bold();
  white-space: nowrap;
  font-size: var(--m-size);
  line-height: 1;
  padding: 23px var(--px04) 21px;
  background-color: var(--jambonz);
  color: var(--white);
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 30px;
  display: inline-block;
  transition: background-color var(--base-dur) var(--base-ease),
    border-color var(--base-dur) var(--base-ease),
    color var(--base-dur) var(--base-ease);

  svg,
  span {
    display: inline-block;
    vertical-align: middle;
  }

  svg:last-child {
    margin-left: var(--px02);
  }

  svg:first-child {
    margin-right: var(--px02);
  }

  svg {
    width: 18px;
    height: 18px;

    @media (max-width: vars.$width-tablet-2) {
      margin-right: 12px;
      width: var(--px02);
      height: var(--px02);
    }

    @media (max-width: vars.$width-mobile) {
      margin-right: 10px;
      width: 14px;
      height: 14px;
    }
  }

  &:hover {
    background-color: mix(vars.$pink, vars.$jambonz, vars.$mix-amount);
  }

  @media (max-width: vars.$width-tablet-2) {
    font-size: var(--ms-size);
  }

  &--dark {
    background-color: var(--dark);

    &:hover {
      background-color: mix(vars.$white, vars.$dark, vars.$mix-amount);
    }
  }

  &--blue {
    background-color: var(--blue);

    &:hover {
      background-color: mix(vars.$white, vars.$blue, vars.$mix-amount);
    }
  }

  &--teal {
    background-color: var(--teal);

    &:hover {
      background-color: mix(vars.$white, vars.$teal, vars.$mix-amount);
    }
  }

  &--purple {
    background-color: var(--purple);

    &:hover {
      background-color: mix(vars.$white, vars.$purple, vars.$mix-amount);
    }
  }

  &--white {
    background-color: var(--white);
    color: var(--jambonz);

    &:hover {
      background-color: mix(vars.$grey, vars.$white, vars.$mix-amount);
    }
  }

  &--grey {
    background-color: var(--grey);
    color: var(--white);

    &:hover {
      background-color: mix(vars.$white, vars.$grey, vars.$mix-amount);
    }
  }

  &[disabled] {
    background-color: var(--grey);
    cursor: not-allowed;
    color: var(--white);

    &:hover {
      background-color: var(--grey);
    }
  }

  &--hollow {
    font-family: var(--font-regular);
    background-color: transparent;
    border: var(--width-border) solid var(--jambonz);
    color: var(--jambonz);
    padding: 18px var(--px03) 17px;

    &:hover {
      background-color: var(--jambonz);
      color: var(--white);
    }

    @media (max-width: vars.$width-mobile) {
      padding: 15px var(--px03) var(--px02);
    }

    &.btn--dark {
      border-color: var(--dark);
      color: var(--dark);

      svg {
        stroke: var(--dark);
      }

      &:hover {
        background-color: var(--dark);
        color: var(--white);

        svg {
          stroke: var(--white);
        }
      }
    }

    &.btn--blue {
      border-color: var(--blue);
      color: var(--blue);

      svg {
        stroke: var(--blue);
      }

      &:hover {
        background-color: var(--blue);
        color: var(--white);

        svg {
          stroke: var(--white);
        }
      }
    }

    &.btn--teal {
      border-color: var(--teal);
      color: var(--teal);

      svg {
        stroke: var(--teal);
      }

      &:hover {
        background-color: var(--teal);
        color: var(--white);

        svg {
          stroke: var(--white);
        }
      }
    }

    &.btn--purple {
      border-color: var(--purple);
      color: var(--purple);

      svg {
        stroke: var(--purple);
      }

      &:hover {
        background-color: var(--purple);
        color: var(--white);

        svg {
          stroke: var(--white);
        }
      }
    }

    &.btn--white {
      border-color: var(--white);
      color: var(--white);

      svg {
        stroke: var(--white);
      }

      &:hover {
        background-color: var(--white);
        color: var(--dark);

        svg {
          stroke: var(--dark);
        }
      }
    }

    &.btn--grey {
      border-color: var(--grey);
      color: var(--grey);

      svg {
        stroke: var(--grey);
      }

      &:hover {
        background-color: var(--grey);
        color: var(--white);

        svg {
          stroke: var(--white);
        }
      }
    }

    &[disabled] {
      background-color: transparent;
      border-color: var(--grey);
      cursor: not-allowed;
      color: var(--grey);

      svg {
        stroke: var(--grey);
      }

      &:hover {
        background-color: transparent;
        border-color: var(--grey);
        color: var(--grey);

        svg {
          stroke: var(--grey);
        }
      }
    }
  }

  &--small {
    font-family: var(--font-medium);
    font-size: var(--ms-size);
    padding: 10px 26px;

    @media (max-width: vars.$width-tablet-2) {
      font-size: var(--mxs-size);
    }
  }
}

.btn:not(.btn--hollow, .btn--small) {
  @media (max-width: vars.$width-tablet-2) {
    padding: 18px 46px;
  }
}

.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  grid-gap: var(--px02);

  &--left {
    justify-content: flex-start;
  }

  &--right {
    justify-content: flex-end;
  }
}