/*
* ToggleButton component
*
*/

@import '../../../style/core/utilities.scss';

.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 {
    &.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;
      }

      &__focus,
      &__button {
        width: calc(var(--checkbox-width--medium) - 0.5rem);
        height: calc(var(--checkbox-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(--checkbox-width--medium) - 1rem);
        height: calc(var(--checkbox-height--medium) - 1rem);
      }

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

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

      &__input {
        pointer-events: none;
      }

      &__focus,
      &__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-width--medium) - 1rem);
        height: calc(var(--radio-height--medium) - 1rem);
      }
    }
  }

  // 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 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 allAbove(small) {
    .dnb-form-label + & {
      transform: translateY(-0.5rem);
    }
  }
}