@layer component {
  
  @media (min-width: 960px) {
    theme-tab {
      display: none;
    }

    theme-tab.active {
      display: block;
      animation: animation-fade-in 0.3s ease forwards;
    }

    theme-tab theme-collapse>details>summary {
      display: none;
    }

    .tabs__nav {
      display: flex;
      gap: 36px;
    }

    .tabs__nav button {
      padding: 0;
      border: none;
      background: none;
      cursor: pointer;
      color: rgb(var(--color-text));
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      background-repeat: no-repeat;
      background-image: linear-gradient(to var(--transform-origin-start), rgb(var(--color-text)/ 0.3), rgb(var(--color-text)/ 0.3) 50%, rgb(var(--color-text)) 50%);
      background-size: 200% 100%;
      background-position: var(--transform-origin-end);
      transition: background-position 1.2s cubic-bezier(.19, 1, .22, 1);
    }

    .tabs__nav button.active {
      background-position: var(--transform-origin-start);
    }

    @media (pointer: fine) {
      .tabs__nav button:hover {
        background-position: var(--transform-origin-start);
      }
    }
  }

  @media (max-width: 959px) {
    theme-tab {
      display: block;
      border-block-start: 1px solid rgb(var(--color-border));
      border-block-end: 1px solid rgb(var(--color-border));
    }

    theme-tab+theme-tab {
      border-block-start: 0;
    }

    theme-tab theme-collapse>details>summary {
      display: block;
      padding: 20px;
      padding-inline-start: 0;
    }

    theme-tab theme-collapse>details>summary .icon {
      transition: transform 0.3s ease;
    }

    theme-tab theme-collapse>details[open]>summary .icon {
      transform: scaleY(-1);
    }

    theme-tab theme-collapse>details[open]>summary+ :not(details, summary) {
      padding: 0 6px;
    }

    theme-tab theme-collapse>details[open]>summary+ :not(details, summary)::after {
      content: '';
      display: block;
      height: 20px;
    }

    .tabs__nav {
      display: none;
    }
  }
}