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

.btn-group {
  .btn:not(.btn-outline-primary, 
           .btn-outline-secondary,
           .btn-outline-success,
           .btn-outline-danger,
           .btn-outline-warning) {
    border-color: tokens.$color-gray-200;
  }

  .btn {
    padding: 8px 24px;

    &.btn-primary, &.btn-secondary, &.btn-success, &.btn-danger, &.btn-warning {
      &:focus {
        border-color: tokens.$color-gray-200;  
      }
  
      &:hover {
        border-color: tokens.$color-gray-200;  
      }
  
      &:active, &.active {
        border-color: tokens.$color-gray-200;  
      }
    }

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

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

    &.btn-success {
      &:focus-visible {
        border-color: tokens.$color-success-500;  
      }
    }

    &.btn-danger {
      &:focus-visible {
        border-color: tokens.$color-danger-500;  
      }
    }

    &.btn-warning {
      &:focus-visible {
        border-color: tokens.$color-warning-500;  
      }
    }
  }

  & .btn + .btn-outline-primary:disabled, & .btn-outline-primary.disabled {
    border-left-color: tokens.$color-default-500;
  }

  & .btn + .btn-outline-secondary:disabled, & .btn-outline-secondary.disabled {
    border-left-color: tokens.$color-highlight-500;
  }

  & .btn + .btn-outline-success:disabled, & .btn-outline-success.disabled {
    border-left-color: tokens.$color-success-500;
  }

  & .btn + .btn-outline-danger:disabled, & .btn-outline-danger.disabled {
    border-left-color: tokens.$color-danger-500;
  }

  & .btn + .btn-outline-warning:disabled, & .btn-outline-warning.disabled {
    border-left-color: tokens.$color-warning-500;
  }
}

.btn-group-sm > .btn,
.btn-group-lg > .btn  {
  border-radius: 1px;
}