/* Custom To https://shoelace.style/
================================*/

sl-button {
	margin: 2px;
}

sl-details::part(summary) {
  font-weight: bold; 
}

/* changes Default Primary Button Color
================================*/

button--standard.button--primary {
  background-color: var(--sl-color-primary-800)!important;
  border-color: var(--sl-color-primary-800)!important;
  color: var(--sl-color-neutral-0)!important;
}

button--standard.button--primary:hover {
  background-color: var(--sl-color-primary-900)!important;
  border-color: var(--sl-color-primary-900)!important;
  color: var(--sl-color-neutral-0)!important;
}

.tomato-button::part(base) {
    background: var(--sl-color-neutral-0);
    border: solid 1px tomato;
  }

  .tomato-button::part(base):hover {
    background: rgba(255, 99, 71, 0.1);
  }

  .tomato-button::part(base):active {
    background: rgba(255, 99, 71, 0.2);
  }

  .tomato-button::part(base):focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
  }

  .tomato-button::part(label) {
    color: tomato;
  }


.sky-button::part(base) {
    background: var(--sl-color-neutral-0);
    border: solid 1px var(--sl-color-primary-500);
  }

  .sky-button::part(base):hover {
    background: var(--sl-color-primary-100);
  }

  .sky-button::part(base):active {
    background: rgba(255, 99, 71, 0.2);
  }

  .sky-button::part(base):focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.33);
  }

  .sky-button::part(label) {
    color: var(--sl-color-primary-600);
  }


/* Label for forms/
================================*/
.label-on-left {
    --label-width: 5.75rem;
    --gap-width: 1rem;
  }

  .label-on-left + .label-on-left {
    margin-top: var(--sl-spacing-medium);
  }

  .label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
  }

  .label-on-left::part(form-control-label) {
    text-align: right;
      font-weight: 500;
  }

  .label-on-left::part(form-control-help-text) {
    grid-column-start: 2;
  }

.button--standard.button--primary {

    background-color: var(--sl-color-primary-900);
    border-color: var(--sl-color-primary-800);
    color: var(--sl-color-neutral-0);

}