@layer cavalree {
	:where([data-cavalree="tab-panel"i], [data-cavalree^="tab-panel@"i]) {
		--c-text--align: start;

		&[hidden] {
			display: none !important;
		}
	}

	:where([data-cavalree="tab-panel/asset"i], [data-cavalree^="tab-panel/asset@"i]) {
	}

	:where([data-cavalree="tab-panel/content"i], [data-cavalree^="tab-panel/content@"i]) {
	}

	:where([data-cavalree="tab-panel/figure"i], [data-cavalree^="tab-panel/figure@"i]) {
	}

	:where([data-cavalree="tab-panel/inner"i], [data-cavalree^="tab-panel/inner@"i]) {
		--c-content-sidebar--gap--block: 2rem;
		--c-content-sidebar--gap--inline: var(--c--size--gutter);

		& :is([data-cavalree="media/asset"i], [data-cavalree^="media/asset@"i]) {
			--c-frame--ratio: calc(4 / 3);
		}
	}

	:where([data-cavalree="tab-panel/kicker"i], [data-cavalree^="tab-panel/kicker@"i]) {
	}

	:where([data-cavalree="tab-panel/label"i], [data-cavalree^="tab-panel/label@"i]) {
	}
}

@layer cavalree {
	[data-cavalree="tab-panel"i] {
	}

	[data-cavalree="tab-panel/asset"i] {
	}

	[data-cavalree="tab-panel/content"i] {
	}

	[data-cavalree="tab-panel/figure"i] {
	}

	[data-cavalree="tab-panel/inner"i] {
	}

	[data-cavalree="tab-panel/kicker"i] {
	}

	[data-cavalree="tab-panel/label"i] {
	}
}

.c-tab-select {
	appearance: unset;

	background-color: inherit;
	border-radius: 0px;
  display: block flow;
	color: inherit;
  font-family: var(--c--typography--display--family);
  font-size: inherit;
  font-style: var(--c--typography--display--style);
  font-weight: var(--c--typography--display--weight);
	inline-size: 100cqi;
  letter-spacing: var(--c--typography--display--tracking);
  margin-inline: auto;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  text-align: start;
  max-inline-size: 100%;

  &[hidden] {
    display: none !important;
  }
}

.c-tab-select-wrapper {
	background-color: var(--c-box--color--text);
	color: var(--c--color--canvas);
	display: block;
	position: relative;
	margin-block-end: 0.5rem;

	[data-color="#300000"] & {
		background-color: var(--c--color--44110C);
		color: var(--c-box--color--text);
	}

	&[hidden] {
		display: none !important;
	}

	.c-tab-panel & {
		background-color: transparent;
		color: var(--c--color--text);
	}

	&::after {
		position: absolute;
		content: "";
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill-rule='evenodd' d='M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
		display: block;
		block-size: 1em;
		inline-size: 1em;
		background-color: currentcolor;
		inset-inline-end: 1rem;
		inset-block: calc(50% - 0.5em);
		pointer-events: none;
		z-index: 1;
	}
}

.c-tab-list {
  border-block-end-width: 3px;
  color: var(--c--color--border);
	display: block flex;
	column-gap: var(--c--size--gutter);
	inline-size: fit-content;
	justify-content: center;
	margin-block-end: 4rem;
	margin-inline: auto;
	padding: 1rem;

	&[hidden] {
		display: none !important;
	}

  & .c-tab {
    border-block-end-width: 0px;
    color: var(--c-box--color--text);
    contain: layout;
		cursor: pointer;
    display: block flex;
    flex-direction: column;
		opacity: 0.4;
		padding: 1rem;

		&:is(:focus, :focus-visible) {
			outline-width: 0px;
	
			&::before {
				outline-style: solid;
				outline-width: 3px;
				outline-offset: 2px;
			}
		}

    &[aria-selected="true"i] {
			opacity: 1;

      &::before {
        content: "";
        display: block;
        inline-size: 1rem;
        block-size: 1rem;
        position: absolute;
        background-color: currentcolor;
        border-radius: 100%;
        inset-inline: calc(50% - 0.5rem);
        inset-block-end: calc(-1.5rem - 1.5px);
      }
    }

    & .c-tab_content {
      font-family: var(--c--typography--display--family);
      font-size: 1.25rem;
      font-style: var(--c--typography--display--style);
      font-weight: var(--c--typography--display--weight);
      letter-spacing: var(--c--typography--display--tracking);
      line-height: 1;
      text-transform: var(--c--typography--display--case);
    }
  }

  button {
		all: unset;

    &[aria-selected="true"i] {
      border-color: currentcolor;
    }
  }
}