@use 'colours';
@use 'responsive';
@use 'typography';

/* Button Wrapper */
.button-wrapper {
  display: inline-flex;
  flex-direction: column;

  .error-wrap {
    max-width: 240px;
    display: flex;
    margin-top: 11px;

    > span {
      color: colours.$colour-utility-error;
      margin-left: 10px;
      font-size: 16px;
    }
  }
}

/* Primary Buttons */
button,
input[type='button'] {
  display: inline-block;
  background-color: colours.$colour-button-standard;
  color: colours.$colour-button-text;
  border: 2px solid colours.$colour-button-standard;
  height: 60px;
  padding: 15px 18px;
  font-size: 21px;
  white-space: nowrap;
  min-width: 200px;
  cursor: pointer;
  @include responsive.not-desktop {
    min-width: unset;
    max-width: 200px;
    width: 100%;
    height: 50px;
    padding: 10px 18px;
  }

  &:hover {
    background-color: colours.$colour-button-hover;
    border: 2px solid colours.$colour-button-hover;
  }

  &:active {
    background-color: colours.$colour-button-selected;
    border: 2px solid colours.$colour-button-border-selected;
    color: colours.$colour-button-icon-selected;

    i {
      color: colours.$colour-button-icon-selected;
    }

    p {
      color: colours.$colour-button-text-selected;
    }
  }

  &:disabled {
    background-color: colours.$colour-button-deselected;
    border: 2px solid colours.$colour-button-deselected;
    cursor: default;
  }

  &.icon {
    min-width: 240px;
    display: flex;
    justify-content: space-between;
    @include responsive.not-desktop {
      min-width: unset;
      max-width: 240px;
      width: 100%;
    }
  }

  p {
    color: colours.$colour-button-text;
    padding-top: 2px;
    font-weight: typography.$font-weight-medium;
  }

  i {
    display: inline-block;
    font-size: 24px;
    color: colours.$colour-button-icon;
    padding-left: 15px;
  }
}

/* Secondary Buttons */
button.secondary,
input[type='button'].secondary {
  display: inline-block;
  background-color: colours.$colour-button-secondary-standard;
  color: colours.$colour-button-secondary-text;
  border: 2px solid colours.$colour-button-secondary-border-standard;
  height: 60px;
  padding: 15px 18px;
  font-size: 21px;
  white-space: nowrap;
  min-width: 200px;
  @include responsive.not-desktop {
    min-width: unset;
    max-width: 200px;
    width: 100%;
    height: 50px;
    padding: 10px 18px;
  }

  &:hover {
    background-color: colours.$colour-button-secondary-hover;
    border: 2px solid colours.$colour-button-secondary-border-hover;
  }

  &:active {
    background-color: colours.$colour-button-secondary-selected;
    border: 2px solid colours.$colour-button-secondary-selected;
    color: colours.$colour-button-secondary-icon-selected;

    i {
      color: colours.$colour-button-secondary-icon-selected;
    }

    p {
      color: colours.$colour-button-secondary-text-selected;
    }
  }

  &:disabled {
    background-color: colours.$colour-button-secondary-deselected;
    border: 2px solid colours.$colour-button-secondary-deselected;
  }

  &.icon {
    min-width: 240px;
    display: flex;
    justify-content: space-between;
    @include responsive.not-desktop {
      min-width: unset;
      max-width: 240px;
      width: 100%;
    }
  }

  p {
    color: colours.$colour-button-secondary-text;
    padding-top: 2px;
    font-weight: typography.$font-weight-medium;
  }

  i {
    display: inline-block;
    font-size: 24px;
    color: colours.$colour-button-secondary-icon;
    padding-left: 15px;
  }
}