/** ************************************************************* */
/** Global shoelace overrides                                     */
/** ************************************************************* */

:root,
:host,
.sl-theme-light {
  /***********************************/
  /***** Shoelace variable overrides */
  /***********************************/

  /* Font family */
  --sl-font-mono: var(--ts-font-mono);
  --sl-font-sans: var(--ts-font-sans);
  --sl-font-serif: var(--ts-font-serif);

  /* Overlay */
  --sl-overlay-background-color: rgba(var(--ts-color-blue-900-rgb), 0.5);

  /* Border radius */
  --sl-border-radius-small: var(--ts-border-radius-small);

  /* Because Menu component doesn't allow radius to be customized to another radius token */
  /* 8px  */
  --sl-border-radius-medium: var(--sl-border-radius-large);

  /* Shadows */
  --sl-shadow-x-small: var(--ts-shadow-x-small);
  --sl-shadow-small: var(--ts-shadow-small);
  --sl-shadow-medium: var(--ts-shadow-large);
  --sl-shadow-large: var(--ts-shadow-medium);
  --sl-shadow-x-large: var(--ts-shadow-x-large);

  /* Spacing */
  --sl-spacing-2x-large: var(--ts-spacing-2x-large);
  --sl-spacing-4x-large: var(--ts-spacing-4x-large);

  /* Button font size*/
  --sl-button-font-size-large: var(--sl-font-size-small);
  --sl-button-font-size-x-large: var(--sl-font-size-medium);

  /* Input label font color */
  --sl-input-label-color: var(--ts-color-text-default);

  /* Input label font size */
  --sl-input-label-font-size-small: var(--ts-font-sm);
  --sl-input-label-font-size-medium: var(--ts-font-sm);
  --sl-input-label-font-size-large: var(--ts-font-sm);

  /* Input help text font color */
  --sl-input-help-text-color: var(--ts-color-text-subdued);

  /* Input help text font size */
  --sl-input-help-text-font-size-small: var(--ts-font-sm);
  --sl-input-help-text-font-size-medium: var(--ts-font-sm);
  --sl-input-help-text-font-size-large: var(--ts-font-sm);

  /* Input font color */
  --sl-input-color: var(--ts-color-text-default);
  --sl-input-color-hover: var(--ts-color-text-default);
  --sl-input-color-focus: var(--ts-color-text-default);
  --sl-input-color-disabled: var(--ts-color-text-default);
  --sl-input-placeholder-color: var(--ts-color-text-subdued);
  --sl-input-placeholder-color-disabled: var(--ts-color-text-subdued);

  /* Input font size */
  --sl-input-font-size-large: var(--sl-font-size-medium);

  /* Input required asterisk color */
  --sl-input-required-content-color: var(--sl-color-danger-700);

  /* Input icon colors */
  --sl-input-icon-color: var(--sl-color-neutral-700);
  --sl-input-icon-color-hover: var(--sl-color-neutral-900);
  --sl-input-icon-color-focus: var(--sl-color-neutral-900);

  /* Input sizes */
  --sl-input-height-small: var(--ts-input-height-small);
  --sl-input-height-medium: var(--ts-input-height-medium);
  --sl-input-height-large: var(--ts-input-height-large);
  --sl-input-height-x-large: var(--ts-input-height-x-large);

  /* Input spacing */
  --sl-input-spacing-medium: var(--sl-spacing-medium);
  --sl-input-spacing-large: var(--sl-spacing-medium);

  /* Input border radius */
  --sl-input-border-radius-small: var(--sl-border-radius-small);
  --sl-input-border-radius-medium: var(--sl-border-radius-large);
  --sl-input-border-radius-large: var(--sl-border-radius-large);
  --sl-input-border-radius-x-large: var(--sl-border-radius-x-large);

  /* Input border colors */
  --sl-input-border-color: var(--sl-color-neutral-400);
  --sl-input-border-color-hover: var(--sl-color-neutral-400);

  /* Focus rings */
  --sl-focus-ring-color: rgba(var(--ts-color-blue-500-rgb), 0.5);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-width: 4px;
  --sl-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width)
    var(--sl-focus-ring-color);
  --sl-focus-ring-offset: 0;
  --sl-input-focus-ring-color: rgba(var(--ts-color-blue-500-rgb), 0.5);
  --sl-error-focus-ring-color: rgba(var(--ts-color-red-600-rgb), 0.5);

  /* Panel (used in dropdown menu, popovers, etc.) */
  --sl-panel-background-color: var(--sl-color-neutral-0);
  --sl-panel-border-color: var(--sl-color-neutral-300);
  --sl-panel-border-width: 1px;

  /* Tooltip */
  --sl-tooltip-border-radius: var(--ts-border-radius-x-small);
}

/** *********************************** */
/** Override aggressive Tailwind resets */
/** *********************************** */

sl-input[type],
sl-input[type]:focus,
sl-input[multiple],
sl-input[multiple]:focus,
sl-input textarea,
sl-input textarea:focus,
sl-input select sl-input,
sl-input select sl-input:focus {
  border-width: 0;
  padding: initial;
  outline: none;
  --tw-ring-color: transparent;
  --tw-ring-offset-shadow: none;
  --tw-ring-shadow: none;
  box-shadow: none;
  border-color: initial;
}

sl-icon[type] {
  border-width: 0;
}

sl-menu {
  border: solid var(--sl-panel-border-color) var(--sl-panel-border-width);
}

sl-menu-item[type] {
  display: block;
  width: initial;
  height: initial;
  border: none;
  padding: initial;
  margin: initial;
}

sl-menu-item[type]:focus {
  outline: none;
  box-shadow: none;
}

sl-select[multiple] {
  appearance: initial;
  background-color: transparent;
  border: none;
  font-size: initial;
  line-height: initial;
  padding: 0;
}

sl-select[multiple]:focus {
  border-color: initial;
  box-shadow: initial;
  outline: initial;
  outline-offset: initial;
}

/** ************************************************************* */
/** Shoelace component overrides                                  */
/**                                                               */
/** These overrides will eventually be deprecated in favor of     */
/** modifying the styles in the components themselves             */
/** ************************************************************* */

/** ******************************** */
/** Button */
/** ****************** */

/* To remove default padding from split buttons */
sl-button.no-pad-l::part(base) {
  padding-left: 0;
}

sl-button.no-pad-r::part(base) {
  padding-right: 0;
}

/* To remove margin from buttons that are slotted, so that a gap style can be added to the  parent part */
sl-button.no-gap {
  margin: 0;
}

/** ****************** */
/* Checkbox & radio */
/** ****************** */

sl-checkbox::part(control) {
  border-radius: var(--ts-border-radius-x-small);
}

/* sl-checkbox::part(label),
sl-radio::part(label) {
  margin-inline-start: 0.75em;
} */

/* sl-radio::part(base) {
  margin-top: var(--sl-spacing-medium);
} */

/* To remove the border around the details block */
sl-details.no-border::part(base) {
  border: 0;
}

/** ****************** */
/** Dialog */
/** These overrides are no longer needed for the Dialog component itself. Delete after confirming that no apps are using the .has-icon class. */
/** ****************** */

@media (max-width: 400px) {
  sl-dialog.has-icon > div {
    display: flex;
    flex-direction: column;
  }

  sl-dialog.has-icon > div > :first-child {
    margin-bottom: var(--sl-spacing-medium);
    /* 16px */
  }
}

@media (min-width: 401px) {
  sl-dialog.has-icon {
    --body-spacing: 0 32px 0 80px;
    /* --header-spacing: 32px 0 16px 24px; */
  }

  sl-dialog.has-icon > div {
    align-items: center;
    display: flex;
  }

  sl-dialog.has-icon > div * {
    margin-right: var(--sl-spacing-medium);
    /* 16px */
  }
}

/** ****************** */
/** Drawer */
/** ****************** */
sl-drawer::part(panel) {
  border-radius: 0;
}

/** ****************** */
/** Icon */
/** ****************** */

sl-icon.info::part(base) {
  color: var(--ts-color-text-info);
}

sl-icon.info {
  background: var(--ts-color-blue-100);
}

sl-icon.warning::part(base) {
  color: var(--ts-color-text-warning);
}

sl-icon.warning {
  background: var(--ts-color-yellow-100);
}

sl-icon.danger::part(base) {
  color: var(--ts-color-text-danger);
}

sl-icon.danger {
  background: var(--ts-color-red-100);
}

sl-icon.contained {
  border-radius: var(--sl-border-radius-circle);
  flex-shrink: 0;
  font-size: var(--ts-font-2xl);
  /* 24px */
  padding: var(--sl-spacing-x-small);
}

/** ****************** */
/* Range */
/** ****************** */

sl-range::part(input) {
  padding: 0;
}

sl-range {
  --track-height: var(--sl-spacing-x-small);
  /* 8px */
  --track-color-active: var(--sl-color-neutral-300);
  --track-color-inactive: var(--sl-color-neutral-300);
}