@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.button {
  display: block;
  position: relative;
  padding: $baseUnit ($baseUnit * 7);
  border: 1px solid #A3A3A3;
  outline: 0;
  cursor: pointer;

  transition: width 1s;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
  
  &.button-small {
    min-height: $baseUnit * 5;
    font-size: 15px;
    border-radius: 20px;
  }

  &.button-medium {
    min-height: $baseUnit * 6;
    font-size: 16px;
    border-radius: 24px;
  }

  &.button-large {
    min-height: $baseUnit * 8;
    font-size: 18px;
    border-radius: 32px;
  }

  &.button-primary {
    color: #fff;
    background: $deepSeaGreen;
    border-color: $deepSeaGreen;
  
    &:hover:not(:disabled):not(:active) {
      color: $deepSeaGreen;
      background: #fff;
    }
    
    &:active {
      color: $deepSeaGreen;
      background: $catSkillWhite;
    }
  }
  
  &.button-secondary {
    color: $deepSeaGreen;
    background: $iceCold;
    border-color: $iceCold;
  
    &:hover:not(:disabled):not(:active) {
      color: $deepSeaGreen;
      background: #fff;
      border-color: $deepSeaGreen;
    }

    &:active {
      color: $deepSeaGreen;
      background: $catSkillWhite;
      border-color: $deepSeaGreen;
    }
  }
  
  &.button-secondary2 {
    color: #1D1D26;
    background: #fff;
    border-color: #A3A3A3;
  
    &:hover:not(:disabled):not(:active) {
      color: $deepSeaGreen;
      background: #fff;
      border-color: $deepSeaGreen;
    }

    &:active {
      color: $deepSeaGreen;
      background: $catSkillWhite;
      border-color: $deepSeaGreen;
    }
  }
  
  &:focus-visible {
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px $lightBlue;
  }
  
  &:disabled {
    color: $stein-3;
    background: $noytral-1;
    border-color: $noytral-2;
    cursor: not-allowed;
  }

  .button-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 60%;
    max-height: $baseUnit * 8;
  }

  .button-text {
    font-weight: 700;
    letter-spacing: 0.4px;
  
    &.hide-button-text {
      display: inline-block;
      visibility: hidden;
    }
  }
}

.icon-button {
  @include reset-button();
  outline: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .icon-button-icon {
    color: $deepSeaGreen;
    margin: 0;
    width: $baseUnit * 5;
    height: $baseUnit * 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $iceCold;
    border: 1px solid $iceCold;
    border-radius: 50%;
  }

  .icon-button-text {
    color: $deepSeaGreen;
    margin-left: $baseUnit * 2;
    font-size: 16px;
    line-height: 1em;
    font-weight: bold;
  }

  &:hover {
    .icon-button-icon {
      background: #fff;
      border-color: $deepSeaGreen;
    }

    .icon-button-text {
      text-decoration: underline;
    }
  }

  &:active {
    .icon-button-icon {
      background: $catSkillWhite;
      border-color: $deepSeaGreen;
    }
  }

  &:focus-visible {
    .icon-button-icon {
      box-shadow: 0 0 0 1px #fff, 0 0 0 4px $lightBlue;
    }

    .icon-button-text {
      text-decoration: underline;
    }
  }


  &[disabled] {
    cursor: not-allowed;

    .icon-button-icon {
      background: #EEEEEE;
      border-color: #EEEEEE;
      color: #fff;

      .icon {
        color: #fff;
      }
    }

    .icon-button-text {
      color: #E3E3E3;
      text-decoration: none;
    }
  }

  &.icon-button-transparent-bordered {
    border: 1px solid #A3A3A3;
    border-radius: $baseUnit;
    padding: 0 ($baseUnit * 2);
    height: $baseUnit * 5;
    background-color: white;

    .icon-button-icon {
      background: 0;
      border: 0;
      color: inherit;
      width: auto;
      width: $baseUnit * 3;
      height: $baseUnit * 3;
    }

    .icon-button-text {
      color: inherit;
      font-weight: normal;
    }
  }
}