/*
* ToggleButton component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

.dnb-toggle-button {
  display: inline-flex;
  align-items: center; // because, with this we v align it to the label

  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);

  &__inner {
    display: inline-flex;
    flex-direction: column;
  }

  &__shell {
    position: relative;
    left: 0;
    user-select: none; // Safari / Touch fix
  }

  &--vertical {
    flex-direction: column;
    align-items: flex-start;
  }

  &__component {
    padding-right: 0.5rem;

    display: inline-flex;
    align-items: center;
  }

  &__button {
    --button-border-radius: var(--token-radius-md);

    // Background
    --button-color-bg--default: var(--token-color-background-neutral);
    --button-color-bg--hover: var(--token-color-background-neutral);
    --button-color-bg--active: var(--token-color-background-neutral);

    // Border
    --button-color-border--default: var(--token-color-stroke-neutral-bold);
    --button-color-border--hover: var(--token-color-stroke-action-hover);
    --button-color-border--active: var(
      --token-color-stroke-action-pressed
    );

    // Icon
    --button-color-icon--default: var(--token-color-icon-neutral);
    // Text
    --button-color-text--default: var(--token-color-text-neutral);
    --button-color-text--hover: var(--token-color-text-neutral);
    --button-color-text--active: var(--token-color-text-neutral);

    &.dnb-button--has-text {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    // checkbox
    .dnb-checkbox {
      margin-left: -0.5rem;

      &__input {
        pointer-events: none;
      }

      &__button {
        display: unset;

        // Prevent checkbox state styles from leaking — toggle-button handles its own states
        border-color: inherit;
        transition: none;
      }

      &__focus,
      &__button {
        width: calc(var(--checkbox-width--medium) - 0.25rem);
        height: calc(var(--checkbox-height--medium) - 0.25rem);

        // We used this before for more precise sizing
        border-width: 0.0625rem; // to get 1.5px we use 1px here, and 0.5px with box-shadow
      }

      &__dot {
        width: calc(var(--checkbox-width--medium) - 1rem);
        height: calc(var(--checkbox-height--medium) - 1rem);
      }

      &__gfx {
        width: calc(var(--checkbox-width--medium) - 0.625rem);
        height: calc(var(--checkbox-height--medium) - 0.625rem);
      }
    }

    // radio button
    .dnb-radio {
      margin-left: -0.5rem;

      &__input {
        pointer-events: none;
      }

      &__button {
        width: calc(var(--radio-width--medium) - 0.5rem);
        height: calc(var(--radio-height--medium) - 0.5rem);

        // We used this before for more precise sizing
        border-width: 0.0625rem; // to get 1.5px we use 1px here, and 0.5px with box-shadow
      }

      &__dot {
        width: calc(var(--radio-dot--medium) - 0.125rem);
        height: calc(var(--radio-dot--medium) - 0.125rem);
      }
    }
    @include utilities.hover() {
      .dnb-radio {
        .dnb-radio__button {
          --radio-border-inset--default: var(--radio-border-inset--hover);
          --radio-border-width--default: var(--radio-border-width--hover);
          --radio-color-border--default: var(--radio-color-border--hover);
          --radio-color-background--default: var(
            --radio-color-background--hover
          );
        }
        .dnb-radio__dot {
          --radio-color-dot-on--default: var(--radio-color-dot-on--hover);
        }
      }
      .dnb-checkbox {
        .dnb-checkbox__button {
          --checkbox-color-background-off: var(
            --checkbox-color-background-off--hover
          );
          --checkbox-color-background-off--error: var(
            --checkbox-color-background-off--hover
          );
          --checkbox-color-background-on: var(
            --checkbox-color-background-on--hover
          );
          --checkbox-color-background-on--error: var(
            --checkbox-color-background-on--hover
          );
          --checkbox-border-inset: var(--checkbox-border-inset--hover);
          --checkbox-border-width: var(--checkbox-border-width--hover);
          --checkbox-color-border: var(--checkbox-color-border--hover);
        }
        .dnb-checkbox__gfx {
          --checkbox-color-gfx-on: var(--checkbox-color-gfx--hover);
        }
      }
    }

    @include utilities.active() {
      .dnb-radio {
        .dnb-radio__button {
          --radio-border-inset--default: var(--radio-border-inset--active);
          --radio-border-width--default: var(--radio-border-width--active);
          --radio-color-border--default: var(--radio-color-border--active);
          --radio-color-background--default: var(
            --radio-color-background--active
          );
        }
        .dnb-radio__dot {
          --radio-color-dot-on--default: var(--radio-color-dot-on--active);
        }
      }
      .dnb-checkbox {
        .dnb-checkbox__button {
          --checkbox-color-background-off: var(
            --checkbox-color-background-off--active
          );
          --checkbox-color-background-off--error: var(
            --checkbox-color-background-off--active
          );
          --checkbox-color-background-on: var(
            --checkbox-color-background-on--active
          );
          --checkbox-color-background-on--error: var(
            --checkbox-color-background-on--active
          );
          --checkbox-border-inset: var(--checkbox-border-inset--active);
          --checkbox-border-width: var(--checkbox-border-width--default);
          --checkbox-color-border: var(--checkbox-color-border-on--active);
        }
        .dnb-checkbox__gfx {
          --checkbox-color-gfx-on: var(--checkbox-color-gfx-on--active);
        }
      }
    }

    @include utilities.focusVisible() {
      .dnb-radio {
        .dnb-radio__button {
          --radio-border-inset--default: var(--radio-border-inset--focus);
          --radio-border-width--default: var(--radio-border-width--focus);
          --radio-color-border--default: var(--radio-color-border--focus);
          --radio-color-background--default: var(
            --radio-color-background--focus
          );
        }
        .dnb-radio__dot {
          --radio-color-dot-on--default: var(--radio-color-dot-on--focus);
        }
      }
      .dnb-checkbox {
        .dnb-checkbox__button {
          --checkbox-color-background-off: var(
            --checkbox-color-background--focus
          );
          --checkbox-color-background-off--error: var(
            --checkbox-color-background--focus
          );
          --checkbox-color-background-on: var(
            --checkbox-color-background--focus
          );
          --checkbox-color-background-on--error: var(
            --checkbox-color-background--focus
          );
          --checkbox-border-inset: ;
          --checkbox-border-width: 0.25rem;
          --checkbox-color-border: var(--token-color-stroke-action-focus);
        }
        .dnb-checkbox__gfx {
          --checkbox-color-gfx-on: var(--checkbox-color-gfx--focus);
          --checkbox-color-gfx--error: var(--checkbox-color-gfx--focus);
        }
      }
    }
  }

  &--checked &__button {
    // Background
    --button-color-bg--default: var(
      --token-color-background-selected-subtle
    );
    --button-color-bg--hover: var(
      --token-color-background-selected-subtle
    );
    --button-color-bg--active: var(
      --token-color-background-selected-subtle
    );
    --button-color-bg--disabled: var(
      --token-color-background-neutral-base
    );

    // Border
    --button-color-border--default: var(
      --token-color-component-button-stroke-selected
    );

    // Icon
    --button-color-icon--default: var(--token-color-text-selected);

    // Text
    --button-color-text--default: var(--token-color-text-selected);
    --button-color-text--hover: var(--token-color-text-selected);
    --button-color-text--active: var(--token-color-text-selected);
  }

  &__status--error &__button {
    // Background
    --button-color-bg--default: var(--token-color-background-neutral);

    // Border
    --button-color-border--default: var(
      --token-color-component-button-stroke-action-destructive
    );

    // Icon
    --button-color-icon--default: var(
      --token-color-component-button-icon-action-destructive
    );

    // Text
    --button-color-text--default: var(
      --token-color-component-button-text-action-destructive
    );
  }

  &__status--error#{&}--checked &__button {
    // Background
    --button-color-bg--default: var(--token-color-background-error-subtle);
  }

  // in case we don't define a wrapping group
  // and have a custom label component before the toggle-button (and not inside)
  :not(#{&}-group) > .dnb-form-label + & {
    vertical-align: top;
  }

  // status
  .dnb-form-status {
    order: 2;
    margin-top: 0.5rem;
  }

  // label
  .dnb-form-label {
    margin-right: 1rem;
  }

  &-group {
    --toggle-button-group-column-gap: 1rem;
    --toggle-button-group-row-gap: 1rem;
    display: inline-flex;

    &,
    &__fieldset,
    &__shell {
      flex-grow: 1;
    }

    fieldset {
      @include utilities.fieldsetReset();
    }

    &--column .dnb-toggle-button {
      display: flex;
      margin-right: 0;
    }

    .dnb-toggle-button:last-of-type {
      margin-right: 0;
    }

    // correct the bottom on the last row
    &__shell {
      display: flex;
      flex-direction: column;
      row-gap: var(--toggle-button-group-row-gap);

      &__children {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: var(--toggle-button-group-column-gap);
        row-gap: var(--toggle-button-group-row-gap);

        order: 1;

        &--row {
          flex-direction: row;
        }
        &--column {
          flex-direction: column;
        }
      }

      & > .dnb-form-status {
        order: 2;
        transform: translateY(-0.5rem);
      }
    }

    .dnb-flex-container {
      &--direction-horizontal .dnb-form-label {
        margin-top: 0.5rem;
        align-self: flex-start;
      }
    }

    // vertical alignment - if no label is given
    .dnb-alignment-helper {
      line-height: 2.5rem;
    }

    &__suffix {
      font-size: var(--font-size-basis);
    }
  }

  // default spacing for a single toggle button
  @include utilities.allAbove(small) {
    .dnb-form-label + & {
      transform: translateY(-0.5rem);
    }
  }
}