@import '../mixins';

.btn {
  --link-decoration: none;
  --link-decoration-hover: none;

  //FIXME: Add correct rem
  border-radius: 0.75rem;
  border-radius: 3px;
  //FIXME: Add correct rem
  padding: 2.25rem 4.5rem $spacing-element-8;
  font-size: 3.5rem;
  font-weight: bold;

  &,
  &.disabled,
  &:disabled {

    &,
    &:hover {
      color: get-colour(white);
      color: Var(--sdds-white);
    }
  }
  &.disabled,
  &:disabled {

    &:hover {
      box-shadow: none;
    }
  }
  &:not(:disabled):not(.disabled) {

    &:hover,
    &:focus {
      box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.2);
    }
    &:active,
    &.active {
      color: get-colour(white);
      color: Var(--sdds-white);

      &,
      &:focus {
        box-shadow: inset 0 0 0 99999px rgba(255, 255, 255, 0.2);
      }
    }
  }
  &-link {

    &,
    &:hover {
      color: get-colour(information);
      color: Var(--sdds-info);
    }
    &:not(:disabled):not(.disabled) {

      &:hover,
      &:focus {
        box-shadow: none;
      }
      &:active,
      &.active {
        color: get-colour(information);
        color: Var(--sdds-info);

        &,
        &:focus {
          box-shadow: none;
        }
      }
    }
  }
  &-sm {
    //FIXME: Add correct rem
    padding: 1.25rem $spacing-element-16 1.25rem;
    font-size: $spacing-element-12;
  }
  &-lg {
    //FIXME: Add correct rem
    padding: 3.5rem $spacing-element-20;
    font-size: $spacing-element-16;
  }

  @at-root a#{&}.disabled {
    pointer-events: auto;
    cursor: default;
  }
  // Maybe this should be done in _variables.scss
  $all_colors: map-merge($interaction-colors, $extra-colors);
  // Normally we wouldnt need to override the attributes set using css
  // vars. But because we need a fallback color, we now need to
  @each $type in $types {

    // TODO: The outline style should be reworked to optimize performance
    &-outline-#{$type} {

      & {
        color: map-get($all_colors, $type);
        color: Var(--#{$type});
      }
      &,
      &:not(:disabled):not(.disabled) {

        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
          border-color: map-get($all_colors, $type);
          border-color: Var(--#{$type});
        }
        &:hover,
        &:focus,
        &:active,
        &.active {
          background-color: map-get($all_colors, $type);
          background-color: Var(--#{$type});
        }
        &:hover,
        &:focus,
        &:active,
        &.active,
        &:focus:active,
        &:focus.active {
          box-shadow: none;
        }
      }
    }
  }
  @each $type in join($interaction-types, $interaction-types3) {
    &-#{$type} {

      &,
      &:disabled,
      &.disabled {

        &,
        &:hover {
          background-color: map-get($interaction-colors, $type);
          background-color: Var(--#{$type});
          border-color: map-get($interaction-colors, $type);
          border-color: Var(--#{$type});
        }
      }
      &:not(:disabled):not(.disabled) {

        &:active,
        &.active {
          background-color: map-get($interaction-colors, $type);
          background-color: Var(--#{$type});
          border-color: map-get($interaction-colors, $type);
          border-color: Var(--#{$type});
        }
      }
    }
  }
  @each $type in $interaction-types {
    &-outline-#{$type} {

      &:not(:disabled):not(.disabled) {

        &:hover,
        &:focus,
        &:active,
        &.active {
          color: get-colour(white);
          color: Var(--sdds-white);
        }
      }
    }
  }
  @each $type in $interaction-types2 {
    &-#{$type} {

      &,
      &:disabled,
      &.disabled {

        &,
        &:hover {
          color: map-get($interaction-colors, primary);
          // color: Var(--primary); BS vars has been removed
          background-color: map-get($interaction-colors, secondary);
          // background-color: Var(--secondary); BS vars has been removed
          border-color: map-get($interaction-colors, primary);
          // border-color: Var(--primary); BS vars has been removed
        }
      }
      &:not(:disabled):not(.disabled) {

        &:hover,
        &:focus {
          box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.1);
        }
        &:active,
        &.active {
          color: map-get($interaction-colors, primary);
          // color: Var(--primary);
          background-color: map-get($interaction-colors, secondary);
          // background-color: Var(--secondary);
          border-color: map-get($interaction-colors, primary);
          // border-color: Var(--primary);

          &,
          &:focus {
            box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    &-outline-#{$type} {

      &:not(:disabled):not(.disabled) {

        &:hover,
        &:focus,
        &:active,
        &.active {
          color: $primary;
          // color: Var(--primary);
        }
      }
    }
  }
  @each $type in $interaction-types3 {
    &-outline-#{$type} {
      color: get-colour(white);
      color: Var(--sdds-white);
    }
  }
}