/* TODO rivedere tutto */

.btn {

  /*
  --_button-bg-color, --_button-fg-color e --_button-border-color sono definiti in buttons.css
*/


  &.btn-success {
    --_status-bg-color: var(--status-success-color);
    --_status-fg-color: var(--status-success-fg);
    --_status-border-color: var(--status-success-border-color);
  }
  &.btn-info {
    --_status-bg-color: var(--status-info-color);
    --_status-fg-color: var(--status-info-fg);
    --_status-border-color: var(--status-info-border-color);
  }
  &.btn-danger {
    --_status-bg-color: var(--status-danger-color);
    --_status-fg-color: var(--status-danger-fg);
    --_status-border-color: var(--status-danger-border-color);
  }

  &.btn-success, &.btn-info, &.btn-danger  {
    --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
    --_status-hover-fg-color: var(--_status-bg-color);
    --_status-hover-border-color: var(--_status-bg-color);

    --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 40%, transparent);
    --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 10%, transparent);

    --_hollow-fg: var(--_status-bg-color);
  }

  &.btn-warning {
    --_status-bg-color: var(--status-warning-color);
    --_status-fg-color: var(--status-warning-fg);
    --_status-border-color: var(--status-warning-border-color);

    --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
    --_status-hover-fg-color: var(--_status-fg-color);
    --_status-hover-border-color: var(--_status-fg-color);

    --_status-focus-outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_status-bg-color) 60%, transparent);
    --_status-active-bg: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);

    --_hollow-fg: var(--_status-fg-color);

  }

  &.btn-success, &.btn-info, &.btn-danger, &.btn-warning  {

    --_button-bg-color: var(--_status-bg-color);
    --_button-fg-color: var(--_status-fg-color);
    --_button-border-color: var(--_status-border-color);


    &.btn-hollow {
      --_button-bg-color: color-mix(in srgb, var(--_status-bg-color) 10%, transparent);
      --_button-fg-color: var(--_hollow-fg);
      --_button-border-color: var(--_hollow-fg);

    }


    @media (hover: hover) {
      &:hover {
        --_button-bg-color: var(--_status-hover-bg-color);
        --_button-fg-color: var(--_status-hover-fg-color);
        --_button-border-color: var(--_status-hover-border-color);
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible, &:active {
      outline: var(--_status-focus-outline);
    }

    &:active {
      --_button-bg-color: var(--_status-active-bg);
    }
  }


  /*
@media (prefers-color-scheme: dark) {


  &.btn-success, &.btn-info, &.btn-danger {

    @media (hover: hover) {
      &:hover {
        --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
        --_button-fg-color: var(--_button-bg-color);
        --_button-border-color: color-mix(in srgb, var(--_button-bg-color) 40%, #fff);
      }
    }
  }

  &.btn-warning {

    @media (hover: hover) {
      &:hover {
        --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 60%, #fff);
        --_button-fg-color: var(--_button-fg-color);
        --_button-border-color: var(--_button-fg-color);
      }
    }
  }

  &.btn-success, &.btn-info, &.btn-danger, &.btn-warning {

    &:focus, &:active {
      outline: var(--btn-focus-outline-width) solid color-mix(in srgb, var(--_button-bg-color) 60%, transparent);
    }

    &:active {
      --_button-bg-color: color-mix(in srgb, var(--_button-bg-color) 30%, transparent);
      --_button-fg-color: var(--text-color);
    }
  }
} */
}