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

:host([justify-content-flex-start]) {
  justify-content: flex-start;
}

:host([align-content-flex-start]) {
  align-content: flex-start;
}

:host([justify-content-flex-end]) {
  justify-content: flex-end;
}

:host([align-content-flex-end]) {
  align-content: flex-end;
}

:host([justify-content-center]) {
  justify-content: center;
}

:host([align-content-center]) {
  align-content: center;
}

:host([justify-content-space-between]) {
  justify-content: space-between;
}

:host([align-content-space-between]) {
  align-content: space-between;
}

:host([justify-content-space-around]) {
  justify-content: space-around;
}

:host([align-content-space-around]) {
  align-content: space-around;
}

:host([justify-content-space-evenly]) {
  justify-content: space-evenly;
}

:host([align-content-space-evenly]) {
  align-content: space-evenly;
}

:host([justify-content-stretch]) {
  justify-content: stretch;
}

:host([align-content-stretch]) {
  align-content: stretch;
}

:host([align-items-flex-start]) {
  align-items: flex-start;
}

:host([align-items-flex-end]) {
  align-items: flex-end;
}

:host([align-items-center]) {
  align-items: center;
}

:host([align-items-baseline]) {
  align-items: baseline;
}

:host([align-items-stretch]) {
  align-items: stretch;
}

:host {
  display: flex;
}

:host([flex-row]) {
  flex-direction: row;
}

:host([flex-column]) {
  flex-direction: column;
}

:host([flex-wrap]) {
  flex-wrap: wrap;
}

:host([flex-wrap-reverse]) {
  flex-wrap: wrap-reverse;
}

:host([flex-nowrap]) {
  flex-wrap: nowrap;
}

:host([sl-gap="1"]) {
  gap: var(--sl-spacing-xxx-small);
}

:host([sl-gap-x="1"]) {
  column-gap: var(--sl-spacing-xxx-small);
}

:host([sl-gap-y="1"]) {
  row-gap: var(--sl-spacing-xxx-small);
}

:host([sl-gap="2"]) {
  gap: var(--sl-spacing-xx-small);
}

:host([sl-gap-x="2"]) {
  column-gap: var(--sl-spacing-xx-small);
}

:host([sl-gap-y="2"]) {
  row-gap: var(--sl-spacing-xx-small);
}

:host([sl-gap="3"]) {
  gap: var(--sl-spacing-x-small);
}

:host([sl-gap-x="3"]) {
  column-gap: var(--sl-spacing-x-small);
}

:host([sl-gap-y="3"]) {
  row-gap: var(--sl-spacing-x-small);
}

:host([sl-gap="4"]) {
  gap: var(--sl-spacing-small);
}

:host([sl-gap-x="4"]) {
  column-gap: var(--sl-spacing-small);
}

:host([sl-gap-y="4"]) {
  row-gap: var(--sl-spacing-small);
}

:host([sl-gap="5"]) {
  gap: var(--sl-spacing-medium);
}

:host([sl-gap-x="5"]) {
  column-gap: var(--sl-spacing-medium);
}

:host([sl-gap-y="5"]) {
  row-gap: var(--sl-spacing-medium);
}

:host([sl-gap="6"]) {
  gap: var(--sl-spacing-large);
}

:host([sl-gap-x="6"]) {
  column-gap: var(--sl-spacing-large);
}

:host([sl-gap-y="6"]) {
  row-gap: var(--sl-spacing-large);
}

:host([sl-gap="7"]) {
  gap: var(--sl-spacing-x-large);
}

:host([sl-gap-x="7"]) {
  column-gap: var(--sl-spacing-x-large);
}

:host([sl-gap-y="7"]) {
  row-gap: var(--sl-spacing-x-large);
}

:host([sl-gap="8"]) {
  gap: var(--sl-spacing-xx-large);
}

:host([sl-gap-x="8"]) {
  column-gap: var(--sl-spacing-xx-large);
}

:host([sl-gap-y="8"]) {
  row-gap: var(--sl-spacing-xx-large);
}

:host([sl-gap="9"]) {
  gap: var(--sl-spacing-xxx-large);
}

:host([sl-gap-x="9"]) {
  column-gap: var(--sl-spacing-xxx-large);
}

:host([sl-gap-y="9"]) {
  row-gap: var(--sl-spacing-xxx-large);
}

:host([sl-gap="10"]) {
  gap: var(--sl-spacing-xxxx-large);
}

:host([sl-gap-x="10"]) {
  column-gap: var(--sl-spacing-xxxx-large);
}

:host([sl-gap-y="10"]) {
  row-gap: var(--sl-spacing-xxxx-large);
}

::slotted([sl-basis="1"]) {
  flex-basis: var(--sl-spacing-xxx-small);
}

::slotted([sl-basis="2"]) {
  flex-basis: var(--sl-spacing-xx-small);
}

::slotted([sl-basis="3"]) {
  flex-basis: var(--sl-spacing-x-small);
}

::slotted([sl-basis="4"]) {
  flex-basis: var(--sl-spacing-small);
}

::slotted([sl-basis="5"]) {
  flex-basis: var(--sl-spacing-medium);
}

::slotted([sl-basis="6"]) {
  flex-basis: var(--sl-spacing-large);
}

::slotted([sl-basis="7"]) {
  flex-basis: var(--sl-spacing-x-large);
}

::slotted([sl-basis="8"]) {
  flex-basis: var(--sl-spacing-xx-large);
}

::slotted([sl-basis="9"]) {
  flex-basis: var(--sl-spacing-xxx-large);
}

::slotted([sl-basis="10"]) {
  flex-basis: var(--sl-spacing-xxxx-large);
}

::slotted([sl-basis=auto]) {
  flex-basis: auto;
}

::slotted([sl-grow="0"]) {
  flex-grow: 0;
}

::slotted([sl-shrink="0"]) {
  flex-shrink: 0;
}

::slotted([sl-grow="1"]) {
  flex-grow: 1;
}

::slotted([sl-shrink="1"]) {
  flex-shrink: 1;
}

::slotted([sl-grow="2"]) {
  flex-grow: 2;
}

::slotted([sl-shrink="2"]) {
  flex-shrink: 2;
}

::slotted([sl-grow="3"]) {
  flex-grow: 3;
}

::slotted([sl-shrink="3"]) {
  flex-shrink: 3;
}

::slotted([sl-grow="4"]) {
  flex-grow: 4;
}

::slotted([sl-shrink="4"]) {
  flex-shrink: 4;
}

::slotted([sl-grow="5"]) {
  flex-grow: 5;
}

::slotted([sl-shrink="5"]) {
  flex-shrink: 5;
}

::slotted([sl-grow="6"]) {
  flex-grow: 6;
}

::slotted([sl-shrink="6"]) {
  flex-shrink: 6;
}

::slotted([sl-grow="7"]) {
  flex-grow: 7;
}

::slotted([sl-shrink="7"]) {
  flex-shrink: 7;
}

::slotted([sl-grow="8"]) {
  flex-grow: 8;
}

::slotted([sl-shrink="8"]) {
  flex-shrink: 8;
}

::slotted([sl-grow="9"]) {
  flex-grow: 9;
}

::slotted([sl-shrink="9"]) {
  flex-shrink: 9;
}

::slotted([sl-grow="10"]) {
  flex-grow: 10;
}

::slotted([sl-shrink="10"]) {
  flex-shrink: 10;
}

::slotted([align-self-flex-start]) {
  align-self: flex-start;
}

::slotted([align-self-flex-end]) {
  align-self: flex-end;
}

::slotted([align-self-center]) {
  align-self: center;
}

::slotted([align-self-baseline]) {
  align-self: baseline;
}

::slotted([align-self-stretch]) {
  align-self: stretch;
}