.bk-settings-checkboxes {
  @apply grid gap-10;
}

.bk-settings-buttons {
  @apply grid gap-10;
}

.bk.bk-settings {
  container-type: inline-size;
  .bk-settings-group-title {
    @apply font-bold mb-15 text-xl flex items-center;

    .bk-beta-indicator {
      @apply ml-5;
    }
  }
  .bk-settings-feature-setting {
    @apply py-15 border-t border-t-mono-200;

    &:last-child {
      @apply border-b border-b-mono-200;
    }
  }
  .bk-settings-feature-setting + .bk-settings-feature-setting {
  }

  @container (min-width: 700px) {
    .bk-form-section {
      @apply grid grid-cols-[250px_1fr] py-15 mt-0 items-start;
      @apply border-t border-t-mono-300;
      &:first-child {
        @apply border-t-0 pt-0;
      }
      .bk-settings-group-title {
        @apply mt-15;
      }
      .bk-settings-feature-setting {
        &:first-child {
          @apply border-t-0;
        }

        &:last-child {
          @apply border-b-0;
        }
      }
    }
  }
}

.bk-settings-ui {
  @apply grid gap-15 grid-cols-3;
  li {
    @apply relative;
    &:focus-within {
      .bk-icon {
        @apply outline outline-accent-950/80 outline-offset-[3px];
      }
    }
    label {
      @apply block cursor-pointer;
    }
    input {
      @apply appearance-none absolute top-0 left-0 w-full h-full cursor-pointer opacity-0;
    }
    input + .bk-icon {
      @apply border rounded overflow-hidden pointer-events-none border-mono-300;
      svg {
        @apply w-full h-auto opacity-50;
      }
    }
    input:checked + .bk-icon {
      @apply ring ring-accent-700;
      svg {
        @apply opacity-100;
      }
    }
    input:checked + .bk-icon + span {
      @apply font-semibold text-mono-950;
    }
    input:not(:checked):hover + .bk-icon {
      @apply border-mono-500;
      svg {
        @apply opacity-70;
      }
    }
    input:not(:checked):hover + .bk-icon + span {
      @apply text-mono-800;
    }
    span {
      @apply inline-block mt-10 text-sm text-left w-full text-mono-600;
    }
  }
}

.bk-icon-theme-bg {
  @apply fill-mono-200;
}

.bk-icon-theme-fg {
  @apply fill-white;
}

.bk-icon-theme-text {
  @apply fill-mono-300;
}

.bk-icon-theme-toolbar {
  @apply fill-mono-950;
}

.bk-icon-theme-toolbar-dark-item {
  @apply fill-mono-800 stroke-mono-600;
}

.bk-icon-theme-toolbar-light-item {
  @apply fill-mono-200 stroke-mono-300;
}
