@geoffcox/sterling-svelte-themes/css/sterling/Label.boxed.css

A modern theme for the sterling-svelte component library.

.sterling-label.boxed {
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
  border-radius: 3px;
  border-style: solid;
  border-width: var(--stsv-input__border-width);
}

.sterling-label.boxed:not(.vertical) {
  grid-template-areas: 'text content' 'message message';
}

.sterling-label.boxed:not(.disabled):hover {
  background-color: var(--stsv-input__background-color--hover);
  border-color: var(--stsv-input__border-color--hover);
  color: var(--stsv-input__color--hover);
}

.sterling-label.boxed:focus-within,
.sterling-label.boxed:focus-within:hover {
  background-color: var(--stsv-input__background-color--focus);
  border-color: var(--stsv-input__border-color--focus);
  color: var(--stsv-input__color--focus);
}

.sterling-label.boxed.using-keyboard:focus-within {
  outline-color: var(--stsv-common__outline-color);
  outline-offset: 0;
  outline-style: solid;
  outline-width: var(--stsv-common__outline-width);
}

.sterling-label.boxed .text {
  margin-left: 0.5em;
}