@use "../../../../styles/abstracts/functions" as fun;
@use "../../../../styles/abstracts/mixins" as mix;

.fieldset {
  position: relative;
}

.switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  align-items: center;
  width: fit-content;
  background: var(--color-shadow-light);
  border: fun.convert-px(2) solid var(--color-primary);
  border-radius: fun.convert-px(32);
  box-shadow:
    inset 0 0 fun.convert-px(1) fun.convert-px(1) var(--color-shadow-dark),
    inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);

  &:focus-within {
    outline: fun.convert-px(2) solid var(--color-primary-light);
  }
}

.label {
  display: flex;
  place-items: center;
  place-content: center;
  min-height: fun.convert-px(44);
  padding: fun.convert-px(5) fun.convert-px(12);
  border-top: fun.convert-px(2) solid var(--color-border);
  border-bottom: fun.convert-px(2) solid var(--color-border);
  transition: all 0.15s linear 0s;
}

.item {
  &:first-of-type {
    .label {
      border-left: fun.convert-px(2) solid var(--color-border);
      border-top-left-radius: fun.convert-px(32);
      border-bottom-left-radius: fun.convert-px(32);
    }
  }

  &:last-of-type {
    .label {
      border-right: fun.convert-px(2) solid var(--color-border);
      border-top-right-radius: fun.convert-px(32);
      border-bottom-right-radius: fun.convert-px(32);
    }
  }
}

.radio {
  &:checked + .label {
    background: var(--color-primary);
    box-shadow:
      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-dark),
      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary-darker);
    color: var(--color-fg-inverted);

    svg {
      fill: var(--color-fg-inverted);
      stroke: var(--color-fg-inverted);
    }
  }

  &:not(:checked) + .label {
    svg {
      fill: var(--color-primary-darker);
    }
  }

  &[disabled] + .label {
    opacity: 0.8;
  }
}

.radio:not([disabled]) {
  &:checked + .label:hover {
    background: var(--color-primary-lighter);
    box-shadow:
      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-light),
      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
  }

  &:not(:checked) + .label:hover {
    background: var(--color-shadow-light);
    box-shadow:
      inset 0 0 0 fun.convert-px(1) var(--color-shadow-dark),
      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-shadow);
  }

  &:not(:checked):focus + .label {
    background: var(--color-shadow-light);
  }

  &:checked:focus + .label {
    background: var(--color-primary-lighter);
    box-shadow:
      inset 0 0 fun.convert-px(1) fun.convert-px(2) var(--color-primary-light),
      inset 0 0 fun.convert-px(3) fun.convert-px(2) var(--color-primary);
  }
}