:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

.rrule-picker__month-day-selector-wrapper {
  border-bottom-right-radius: var(--sl-border-radius-small);
  border-bottom-left-radius: var(--sl-border-radius-small);
  overflow: hidden;
}

.rrule-picker__month-selector-wrapper,
.rrule-picker__week-day-selector-wrapper {
  border-top: 1px solid var(--sl-panel-border-color);
  border-radius: var(--sl-border-radius-small);
  overflow: hidden;
}

.rrule-picker__month-weekday-selector-wrapper {
  background-color: var(--sl-panel-background-color);
  padding: var(--sl-spacing-small);
  border-top: 1px solid var(--sl-panel-border-color);
}

.rrule-picker__week-day-selector {
  background: var(--sl-input-background-color-disabled);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.rrule-picker__month-day-selector {
  background: var(--sl-input-background-color-disabled);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--sl-panel-border-color);
}

.rrule-picker__month-selector {
  background: var(--sl-input-background-color-disabled);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.rrule-picker__month-selector__selectable,
.rrule-picker__month-day-selector__selectable,
.rrule-picker__week-day-selector__selectable {
  background: var(--sl-panel-background-color);
  text-align: center;
  padding: var(--sl-spacing-x-small);
}

.rrule-picker__month-selector__selectable--selected,
.rrule-picker__month-day-selector__selectable--selected,
.rrule-picker__week-day-selector__selectable--selected {
  background: var(--sl-selection-background-color-active);
  color: var(--sl-selection-color-active);
}

.rrule-picker__month-week-day-selector {
  display: flex;
  flex-direction: row;
  gap: var(--sl-spacing-x-small);
  margin: var(--sl-spacing-x-small);
}

sl-well:not(:first-child) {
  margin-top: var(--sl-spacing-small);
}

sl-list-item::part(base),
sl-list-item::part(suffix) {
  align-items: center;
}

sl-list-item sl-icon {
  font-size: var(--sl-font-size-medium);
}

sl-select::part(base)::first-letter,
sl-list-item > sl-label > div::first-letter {
  text-transform: capitalize;
}

.rrule-display {
  font-size: var(--sl-font-size-small);
}

.specific-selector {
  font-size: var(--sl-font-size-small);
}

.interval-menu {
  min-width: fit-content;
}

.interval-input {
  min-width: var(--sl-spacing-xxxx-large);
  width: var(--sl-spacing-xxxx-large);
}