@use "../variables" as *;
systelab-spinner {

  .slab-spinner-container {

    &:focus-within {
      border-color: $slab-focus-component-border-color;
      outline: 0;
      box-shadow: $slab-focus-component-shadow;
      border-radius: $slab-border-radius;
    }

    input {

      &:focus {
        border-color: $slab-focus-component-border-color !important;
        outline: 0;
        box-shadow: 0 0 0 3px transparent !important;;
      }

      &.disabled {
        background-color: #e9ecef;
        opacity: 0.6;
      }
    }

    .slab-spinner-input {
      min-width: 0;
      text-align: center;
      height: $form-elements-height !important;

      &.slab-spinner-error {
        border-color: var(--danger);
        color: var(--danger);
      }

    }

    .spinner-button-minus {
      background-color: var(--slab_background_primary);
      border: 1px solid var(--slab_component_border_color);
      color: var(--ag-data-color);

      &:hover:enabled {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;

        [class*='icon-'] {
          color: white !important;
        }
      }

      &.disabled {
        background-color: #e9ecef;
        opacity: 0.6;
      }

      &.slab-spinner-error {
        border-color: var(--danger);
        color: var(--danger);
      }
    }

    .spinner-button-plus {
      background-color: var(--slab_background_primary);
      border: 1px solid var(--slab_component_border_color);
      color: var(--ag-data-color);

      &:hover:enabled {
        background-color: var(--primary);
        border-color: var(--primary);
        color: white;

        [class*='icon-'] {
          color: white !important;
        }
      }

      &.disabled {
        background-color: #e9ecef;
        opacity: 0.6;
      }

      &.slab-spinner-error {
        border-color: var(--danger);
        color: var(--danger);
      }
    }
  }
}