@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/spacing";
@use "system/units";
@use "system/states";

.ods-button {
  @extend %ods-padding-horizontal-4, %ods-padding-vertical-2;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @extend %ods-text--weight-medium;

  background: colors.$blue-dark;
  border: 0.125rem solid colors.$blue-dark;
  color: colors.$white;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  white-space: normal;

  /**
    * Icon child element
    */
  & .ods-button__icon {
    @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-large;

    line-height: 1.5rem;

    @include breakpoints.large {
      line-height: 1.75rem;
    }

    display: inline-block;
    vertical-align: top;

    &--left {
      @extend %ods-margin-right-1;
    }

    &--right {
      @extend %ods-margin-left-1;
    }
  }

  /**
   * Button types
   */
  &.ods-button--outline {
    background-color: transparent;
    border-color: colors.$blue-dark;
    color: colors.$blue-dark;
  }

  &.ods-button--text {
    background-color: transparent;
    border-color: transparent;
    color: colors.$blue-dark;
  }

  &.ods-button--icon {
    @extend %ods-padding-2;

    box-sizing: content-box;
    width: 1.5rem;
    @include breakpoints.large {
      width: 1.75rem;
    }

    &.ods-button--small {
      @extend %ods-padding-1;
    }

    &.ods-button--large {
      @extend %ods-padding-4;
    }
  }

  &.ods-button--circle {
    @extend %ods-padding-2;

    border-radius: 50%;
    box-sizing: content-box;
    width: 1.5rem;
    @include breakpoints.large {
      width: 1.75rem;
    }

    &.ods-button--small {
      @extend %ods-padding-1;

      width: 1.5rem;
    }

    &.ods-button--large {
      @extend %ods-padding-4;

      width: 2rem;
      @include breakpoints.large {
        width: 2.25rem;
      }
    }
  }

  /**
   * Button sizes
   */
  &.ods-button--small {
    @extend %ods-padding-horizontal-3, %ods-padding-vertical-1;
    @extend %ods-text--size-kilo;

    &.ods-button--icon {
      @include breakpoints.large {
        width: 1.5rem;
      }
    }

    & .ods-button__icon {
      @extend %ods-text--size-hotel;

      line-height: 1.5rem;
      @include breakpoints.large {
        line-height: 1.5rem;
      }
    }
  }

  &.ods-button--large {
    @extend %ods-padding-horizontal-6, %ods-padding-vertical-3;
    @extend %ods-text--size-india, %ods-text--size-golf-breakpoint-large;

    &.ods-button--icon {
      width: 2rem;
      @include breakpoints.large {
        width: 2.25rem;
      }
    }

    & .ods-button__icon {
      @extend %ods-text--size-echo;

      line-height: 2rem;
      @include breakpoints.large {
        font-size: 2rem;
        line-height: 2.25rem;
      }
    }
  }

  &.ods-button--fullwidth {
    display: block;
    width: 100%;
  }

  /**
   * Button states
   */
  &:hover,
  &.ods-button--hover,
  &:focus,
  &.ods-button--focus {
    background-color: states.$hover !important;
    border: 2px solid states.$hover !important;
    color: states.$hover-text !important;
    text-decoration: underline;

    &.ods-button--outline {
      background-color: transparent !important;
      border-color: states.$hover;
      color: states.$hover !important;
    }

    &.ods-button--text {
      background-color: colors.$gray !important;
      border-color: colors.$gray !important;
      color: states.$hover !important;
    }
  }

  &--focus,
  &:focus-visible {
    outline-offset: 0;
    outline: 0.25rem solid colors.$purple-light !important;

    &.ods-button--text {
      border: 0.125rem solid colors.$blue-state !important
    }
  }

  &:active,
  &.ods-button--active {
    background-color: states.$active !important;
    border: 0.125rem solid states.$active !important;
    text-decoration: none;

    &.ods-button--outline {
      background-color: states.$hover !important;
      color: colors.$white !important;
    }

    &.ods-button--text {
      background-color: transparent !important;
      border-color: transparent !important;
      text-decoration: underline;
      color: states.$hover !important;
    }
  }

  &:disabled {
    background-color: states.$disabled !important;
    border: 0.125rem solid states.$disabled !important;
    color: states.$disabled-text !important;
    cursor: default;
    text-decoration: none;

    &.ods-button--outline {
      background-color: transparent !important;
      border-color: colors.$grayscale-40 !important;
    }

    &.ods-button--text {
      background-color: transparent !important;
      border-color: transparent !important;
      text-decoration: underline;
    }

    &:hover,
    &:active {
      background-color: states.$disabled !important;
      border: 0.125rem solid states.$disabled !important;
      color: states.$disabled-text !important;

      &.ods-button--outline {
        background-color: transparent !important;
        border-color: colors.$grayscale-40 !important;
        color: colors.$grayscale-40 !important;
      }

      &.ods-button--text {
        background-color: transparent !important;
        border-color: transparent !important;
        color: colors.$grayscale-40 !important;
        text-decoration: underline;
      }
    }
  }

  /**
   * Button colors
   */
  &.ods-button--red {
    color: colors.$blue-dark;
    background-color: colors.$red;
    border: 0.125rem solid colors.$red;

    &.ods-button--outline {
      background-color: transparent;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
    }
  }

  &.ods-button--yellow {
    color: colors.$blue-dark;
    background-color: colors.$yellow;
    border: 0.125rem solid colors.$yellow;

    &.ods-button--outline {
      background-color: transparent;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
    }
  }

  &.ods-button--green-dark {
    color: colors.$white;
    background-color: colors.$green-dark;
    border: 0.125rem solid colors.$green-dark;

    &.ods-button--outline {
      background-color: transparent;
      color: colors.$green-dark;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
      color: colors.$green-dark;
    }
  }

  &.ods-button--green-light {
    color: colors.$green-dark;
    background-color: colors.$green-light;
    border: 0.125rem solid colors.$green-light;

    &.ods-button--outline {
      background-color: transparent;
      color: colors.$green-dark;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
      color: colors.$green-dark;
    }
  }

  &.ods-button--blue-light {
    color: colors.$blue-dark;
    background-color: colors.$blue-light;
    border: 0.125rem solid colors.$blue-light;

    &.ods-button--outline {
      background-color: transparent;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
    }
  }

  &.ods-button--gray {
    color: colors.$blue-dark;
    background-color: colors.$gray-light;
    border: 0.125rem solid colors.$gray-light;

    &.ods-button--outline {
      background-color: transparent;
    }

    &.ods-button--text {
      background-color: transparent;
      border: 0.125rem solid transparent;
    }
  }

  /**
   * Dark mode
   */
  &.ods-button--dark {
    &.ods-button--outline {
      color: colors.$white !important;

      &:hover,
      &.ods-button--hover,
      &:focus,
      &.ods-button--focus {
        border-color: states.$hover-light !important;
        color: states.$hover-light !important;
      }
    }
  }
}