@use "@infineon/design-system-tokens/dist/tokens";

.btn {
  font-weight: 600;
  border-radius: 1px;
  font-weight: 600;
  padding: 0px 16px;
  min-width: 80px;
  min-height: 40px;
  line-height: 24px;

  &.btn-primary, &.btn-outline-primary,
  &.btn-secondary, &.btn-outline-secondary,
  &.btn-success, &.btn-outline-success,
  &.btn-danger, &.btn-outline-danger,
  &.btn-warning, &.btn-outline-warning, 
  &.btn-outline-text {
    &:focus {
      box-shadow: none;
    }
  }

  &.btn-primary, &.btn-outline-primary,
  &.btn-secondary, &.btn-outline-secondary,
  &.btn-success, &.btn-outline-success,
  &.btn-danger, &.btn-outline-danger,
  &.btn-warning, &.btn-outline-warning, 
  &.btn-outline-text {
    &:focus-visible {
      box-shadow: 0 0 0 3px #B4DDD8;
    }
  }

  &:disabled, &.disabled {
    opacity: 1;
    background-color: tokens.$color-gray-300;
    border-color: tokens.$color-gray-300;
    color: tokens.$color-text-white;
  }

  &.btn-primary,
  &.btn-secondary,
  &.btn-success,
  &.btn-danger,
  &.btn-warning {
    &.active {
      & .btn-badge {
        color: tokens.$color-text-black;
      }
    }
  }

  &.btn-outline-primary,
  &.btn-outline-secondary,
  &.btn-outline-success,
  &.btn-outline-danger,
  &.btn-outline-warning {
    &:disabled, &.disabled {
      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }
  }

  &.btn-primary {
    &:focus {
      background-color: tokens.$color-default-500;
      border-color: tokens.$color-default-500;
    }

    &:hover {
      background-color: tokens.$color-default-600;
      border-color: tokens.$color-default-600;  
    }

    &:active, &.active {
      background-color: tokens.$color-default-700;
      border-color: tokens.$color-default-700;  
    }
  }

  &.btn-outline-primary:not(:disabled, .disabled) {
    .btn-badge {
      background-color: tokens.$color-default-500;
      color: tokens.$color-text-white;
    }

    &:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: tokens.$color-default-600;
      border-color: tokens.$color-default-600;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }

    &:active, &.active {
      background-color: tokens.$color-default-700;
      border-color: tokens.$color-default-700;

      & .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }
  }

  &.btn-secondary {
    &:focus {
      background-color: tokens.$color-highlight-500;
      border-color: tokens.$color-highlight-500;
    }

    &:hover {
      background-color: tokens.$color-highlight-600;
      border-color: tokens.$color-highlight-600;
    }

    &:active, &.active {
      background-color: tokens.$color-highlight-700;
      border-color: tokens.$color-highlight-700;  
    }
  }

  &.btn-outline-secondary:not(:disabled, .disabled) {
    .btn-badge {
      background-color: tokens.$color-highlight-500;
      color: tokens.$color-text-white;
    }

    &:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: tokens.$color-highlight-600;
      border-color: tokens.$color-highlight-600;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }

    &:active, &.active {
      background-color: tokens.$color-highlight-700;
      border-color: tokens.$color-highlight-700;

      & .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }
  }

  &.btn-success:not(:disabled, .disabled) {
    & .spinner-border {
      color: tokens.$color-text-black;
    }
    
    &:focus {
      background-color: tokens.$color-success-500;
      border-color: tokens.$color-success-500;
    }

    &:hover {
      background-color: tokens.$color-success-600;
      border-color: tokens.$color-success-600;
    }

    &:active, &.active {
      background-color: tokens.$color-success-700;
      border-color: tokens.$color-success-700;
    }
  }

  &.btn-outline-success:not(:disabled, .disabled) {
    color: tokens.$color-text-black;

    .btn-badge {
      background-color: tokens.$color-success-500;
      color: tokens.$color-text-white;
    }

    &:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: tokens.$color-success-600;
      border-color: tokens.$color-success-600;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-black;
      }
    }

    &:active, &.active {
      background-color: tokens.$color-success-700;
      border-color: tokens.$color-success-700;

      & .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-black;
      }
    }
  }
  
  &.btn-danger {
    &:focus {
      background-color: tokens.$color-danger-500;
      border-color: tokens.$color-danger-500;
    }

    &:hover {
      background-color: tokens.$color-danger-600;
      border-color: tokens.$color-danger-600;
    }

    &:active, &.active {
      background-color: tokens.$color-danger-700;
      border-color: tokens.$color-danger-700;
    }
  }

  &.btn-outline-danger:not(:disabled, .disabled) {
    .btn-badge {
      background-color: tokens.$color-danger-500;
      color: tokens.$color-text-white;
    }

    &:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: tokens.$color-danger-600;
      border-color: tokens.$color-danger-600;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }

    &:active, &.active {
      background-color: tokens.$color-danger-700;
      border-color: tokens.$color-danger-700;

      & .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-white;
      }
    }
  }

  &.btn-warning:not(:disabled, .disabled) {
    & .spinner-border {
      color: tokens.$color-text-black;
    }

    &:focus {
      background-color: tokens.$color-warning-500;
      border-color: tokens.$color-warning-500;
    }
    
    &:hover {
      background-color: tokens.$color-warning-600;
      border-color: tokens.$color-warning-600;
    }

    &:active, &.active {
      background-color: tokens.$color-warning-700;
      border-color: tokens.$color-warning-700;
    }
  }

  &.btn-outline-warning:not(:disabled, .disabled) {
    color: tokens.$color-text-black;

    .btn-badge {
      background-color: tokens.$color-warning-500;
      color: tokens.$color-text-white;
    }

    &:focus {
      background-color: transparent;
    }

    &:hover {
      background-color: tokens.$color-warning-600;
      border-color: tokens.$color-warning-600;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }

      & .spinner-border {
        color: tokens.$color-text-black;
      }
    }

    &:active, &.active {
      background-color: tokens.$color-warning-700;
      border-color: tokens.$color-warning-700;

      .btn-badge {
        background-color: tokens.$color-bg-white;
        color: tokens.$color-text-black;
      }
      
      & .spinner-border {
        color: tokens.$color-text-black;
      }
    }
  }

  &.btn-outline-text { 
    background-color: transparent;
    color: tokens.$color-default-500;

    &:hover {
      color: tokens.$color-default-600;
    }

    &:active, &.active {
      color: tokens.$color-default-700;  
    }

    &:disabled, &.disabled {
      opacity: 1;
      background-color: transparent;
      border-color: transparent;
      color: tokens.$color-gray-300;
    }
  }

  &.btn-primary svg.svg-inline--fa,
  &.btn-outline-primary svg.svg-inline--fa,
  &.btn-secondary svg.svg-inline--fa,
  &.btn-outline-secondary svg.svg-inline--fa,
  &.btn-success svg.svg-inline--fa,
  &.btn-outline-success svg.svg-inline--fa,
  &.btn-danger svg.svg-inline--fa,
  &.btn-outline-danger svg.svg-inline--fa,
  &.btn-warning svg.svg-inline--fa,
  &.btn-outline-warning svg.svg-inline--fa {
    width: 14px;
    height: 14px;
  }

  &.btn-outline-primary,
  &.btn-outline-secondary,
  &.btn-outline-success,
  &.btn-outline-danger,
  &.btn-outline-warning {
    & .spinner-border {
      color: tokens.$color-text-black;
    }
  }

  & .spinner-border {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    color: tokens.$color-text-white;
  }
}

.btn-sm {
  min-width: 71px;
  min-height: 32px;
  line-height: 16px;

  & svg.svg-inline--fa {
    vertical-align: -2.5px;
  }
}

.btn-lg {
  font-size: 22px;

  & svg.svg-inline--fa {
    vertical-align: 0;
  }
}

.ifx {
  &__btn-icon {
    &--before {
      margin-right: 10px;
    }

    &--after {
      margin-left: 10px;
    }
  }
}

.btn-badge {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  padding: 2px 8px;
  min-width: 18px;
  min-height: 18px;
  margin-left: 12px;
  background-color: tokens.$color-bg-white;
  color: tokens.$color-text-black;
}