@import "~@/styles/animations";
@import "~@/styles/fonts";
@import "~@/styles/colors";
@import "~@/styles/layout";

button,
.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 14px 24px;
  font-family: $fontAssistant;
  font-size: $font-size-medium;
  font-weight: 600;
  background: $button-background-primary;
  color: $button-color;
  border-radius: $border-radius;
  border: none;
  cursor: pointer;
  position: relative;
  text-shadow: $button-text-shadow;
  box-shadow: $button-shadow;
  transform: translateY(0);
  transition:
    transform 150ms $easeOutBack,
    box-shadow 150ms $easeOutBack;

  &:hover {
    transform: translateY(-3px);
    box-shadow: $button-shadow-deep;

    &:focus,
    &:active {
      box-shadow: $button-shadow-deep, 0 0 8px $pink;
    }
  }

  &:focus,
  &:active {
    outline: none;
    border: 2px solid $orange;
    box-shadow: $button-shadow, 0 0 8px $pink;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: $border-radius;
    border: 1px solid transparentize($yellow, 0.87);
  }

  svg {
    stroke: $button-color;
    width: 16px;
    height: 16px;
    filter: drop-shadow($button-text-shadow);
    margin-left: $small-gap / 2;

    path,
    polyline {
      stroke: $button-color;
    }
  }

  &[disabled] {
    cursor: not-allowed;
    color: transparentize($button-color, 0.5) !important;
  }

  &.btn-dark {
    background: $button-background-secondary;
    border-color: $button-background-secondary;
    color: $button-color;
    box-shadow: none;
    text-shadow: none;
    transition: background 150ms $easeOutBack;

    &:hover {
      transform: translateY(0);
    }

    &:not([disabled]):hover {
      background: rgba(255, 255, 255, 0.4);
    }

    &::after {
      display: none;
    }

    &:focus,
    &:active {
      outline: none;
      border: 2px solid $orange;
      box-shadow: 0 0 8px transparentize($dark-blue, 0.7);
    }

    svg {
      filter: none;
    }
  }

  &.btn-small {
    padding: 8px 14px;
    font-size: $font-size-small;
  }

  &.btn-txt {
    position: relative;
    all: unset;
    cursor: pointer;
    background: transparent;
    color: $text-color-base;
    border: none;
    font-weight: 400;

    &::after {
      display: none;
    }
  }
}
