@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/opacities';
@import '@vtmn/css-design-tokens/src/shadows';
@import '@vtmn/css-design-tokens/src/transitions';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-toggle {
  display: flex;
  align-items: center;
}

.vtmn-toggle_switch {
  position: relative;
  display: inline-block;
  inline-size: rem(56px);
  block-size: rem(32px);
}

.vtmn-toggle_switch input[type='checkbox'] {
  inline-size: 100%;
  block-size: 100%;
  cursor: pointer;
  margin: 0;
  outline: none;
  opacity: 0;
}

.vtmn-toggle_switch input[type='checkbox']:checked + span {
  background-color: var(--vtmn-semantic-color_content-active);
}

.vtmn-toggle_switch input[type='checkbox']:checked + span::before {
  transform: translateX(rem(24px));
}

.vtmn-toggle_switch input[type='checkbox']:checked + span::after {
  transform: translateX(rem(24px));
  opacity: 1;
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):hover
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):active
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):hover:checked
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-toggle_switch
  input[type='checkbox']:not([disabled]):active:checked
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_active-primary-transparent);
}

.vtmn-toggle_switch input[type='checkbox']:focus-visible + span {
  outline: none;
  box-shadow: var(--vtmn-shadow_focus-visible);
}

.vtmn-toggle_switch span {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--vtmn-semantic-color_content-inactive);
  transition: background-color 0.2s ease-out,
    var(--vtmn-transition_focus-visible);
  border-radius: var(--vtmn-radius_400);
  pointer-events: none;
}

.vtmn-toggle_switch span::before {
  position: absolute;
  content: '';
  block-size: rem(24px);
  inline-size: rem(24px);
  inset-inline-start: rem(4px);
  inset-block-start: rem(4px);
  background-color: var(--vtmn-base-color_white);
  transition: var(--vtmn-transition_focus-visible), transform 0.2s ease-out,
    background-color 0.2s ease-out;
  border-radius: 50%;
}

.vtmn-toggle_switch span::after {
  content: '';
  mask: url("data:image/svg+xml;charset=utf-8, <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M5.80351 10.8L14.2875 2.31484L12.5907 0.618038L5.80351 7.40644L2.40871 4.01164L0.711914 5.70844L5.80351 10.8Z'/></svg>");
  mask-size: cover;
  position: absolute;
  inline-size: rem(24px);
  block-size: rem(24px);
  inset-block-start: rem(10px);
  inset-inline-start: rem(9px);
  background-color: var(--vtmn-semantic-color_content-active);
  transition: var(--vtmn-transition_focus-visible), transform 0.2s ease-out,
    background-color 0.2s ease-out;
  opacity: 0;
}

.vtmn-toggle label {
  font-family: var(--vtmn-typo_font-family);
  color: var(--vtmn-semantic-color_content-primary);
  font-size: var(--vtmn-typo_text-2-font-size);
  margin-inline-start: rem(12px);
}

/* Disabled state */

.vtmn-toggle input[type='checkbox']:disabled {
  cursor: not-allowed;
}

.vtmn-toggle input[type='checkbox']:disabled + span {
  opacity: var(--vtmn-opacity_disabled-state);
}

/* Small */

.vtmn-toggle_size--small .vtmn-toggle_switch {
  inline-size: rem(42px);
  block-size: rem(24px);
}

.vtmn-toggle_size--small .vtmn-toggle_switch span::before {
  block-size: rem(16px);
  inline-size: rem(16px);
}

.vtmn-toggle_size--small label {
  font-size: var(--vtmn-typo_text-3-font-size);
  margin-inline-start: rem(8px);
}

.vtmn-toggle_size--small span::after {
  inline-size: rem(18px);
  block-size: rem(18px);
  inset-block-start: rem(8px);
  inset-inline-start: rem(7px);
}

.vtmn-toggle_size--small input[type='checkbox']:checked + span::before {
  transform: translateX(rem(18px));
}

.vtmn-toggle_size--small input[type='checkbox']:checked + span::after {
  transform: translateX(rem(18px));
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):hover
  + span::before {
  box-shadow: 0 0 0 rem(8px)
    var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):active
  + span::before {
  box-shadow: 0 0 0 rem(8px)
    var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):hover:checked
  + span::before {
  box-shadow: 0 0 0 rem(8px)
    var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-toggle_size--small
  input[type='checkbox']:not([disabled]):active:checked
  + span::before {
  box-shadow: 0 0 0 rem(8px)
    var(--vtmn-semantic-color_active-primary-transparent);
}

/* Medium */

.vtmn-toggle_size--medium .vtmn-toggle_switch {
  inline-size: rem(56px);
  block-size: rem(32px);
}

.vtmn-toggle_size--medium .vtmn-toggle_switch span::before {
  block-size: rem(24px);
  inline-size: rem(24px);
}

.vtmn-toggle_size--medium label {
  font-size: var(--vtmn-typo_text-2-font-size);
  margin-inline-start: rem(12px);
}

.vtmn-toggle_size--medium span::after {
  block-size: rem(24px);
  inline-size: rem(24px);
  inset-block-start: rem(10px);
  inset-inline-start: rem(9px);
}

.vtmn-toggle_size--medium input[type='checkbox']:checked + span::before {
  transform: translateX(rem(24px));
}

.vtmn-toggle_size--medium input[type='checkbox']:checked + span::after {
  transform: translateX(rem(24px));
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):hover
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_hover-secondary-transparent);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):active
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_active-secondary-transparent);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):hover:checked
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_hover-primary-transparent);
}

.vtmn-toggle_switch--medium
  input[type='checkbox']:not([disabled]):active:checked
  + span::before {
  box-shadow: 0 0 0 rem(12px)
    var(--vtmn-semantic-color_active-primary-transparent);
}
