corex

@import "../main.css";

@layer components {
  .collapsible[data-loading] [data-scope="collapsible"][data-part="root"] {
    @apply ui-loading;
  }

  .collapsible {
    width: 100%;
    max-width: var(--container-md);
  }

  .collapsible [data-scope="collapsible"][data-part="root"] {
    @apply ui-root;
  }

  .collapsible [data-scope="collapsible"][data-part="root"][data-orientation="vertical"] {
    flex-direction: column;
    align-items: stretch;
  }

  .collapsible [data-scope="collapsible"][data-part="root"][data-orientation="horizontal"] {
    flex-flow: row nowrap;
    align-items: flex-start;
  }

  .collapsible [data-scope="collapsible"][data-part="trigger"] {
    @apply ui-trigger;

    justify-content: space-between;
    max-width: var(--container-5xs);
    place-self: flex-start;
    width: auto;
    box-shadow: var(--shadow-ui);
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="horizontal"]
    [data-scope="collapsible"][data-part="trigger"] {
    flex-shrink: 0;
    max-width: none;
  }

  .collapsible [data-scope="collapsible"][data-part="trigger"] svg {
    @apply ui-icon;
  }

  .collapsible
    [data-scope="collapsible"][data-part="trigger"][data-state="closed"]:has(
      [data-scope="collapsible"][data-part="opened"]
    )
    [data-scope="collapsible"][data-part="opened"] {
    display: none;
  }

  .collapsible
    [data-scope="collapsible"][data-part="trigger"][data-state="open"]:has(
      [data-scope="collapsible"][data-part="opened"]
    )
    [data-scope="collapsible"][data-part="closed"] {
    display: none;
  }

  .collapsible [data-scope="collapsible"][data-part="closed"] {
    display: inline-flex;
    transition: transform 0.2s ease;
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="vertical"]
    [data-scope="collapsible"][data-part="trigger"][data-state="open"]:not(
      :has([data-scope="collapsible"][data-part="opened"])
    )
    [data-scope="collapsible"][data-part="closed"] {
    transform: rotate(90deg);
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="vertical"]
    [data-scope="collapsible"][data-part="trigger"][dir="rtl"][data-state="open"]:not(
      :has([data-scope="collapsible"][data-part="opened"])
    )
    [data-scope="collapsible"][data-part="closed"] {
    transform: rotate(-90deg);
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="horizontal"]
    [data-scope="collapsible"][data-part="trigger"][data-state="open"]:not(
      :has([data-scope="collapsible"][data-part="opened"])
    )
    [data-scope="collapsible"][data-part="closed"] {
    transform: rotate(90deg);
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="horizontal"]
    [data-scope="collapsible"][data-part="trigger"][dir="rtl"][data-state="open"]:not(
      :has([data-scope="collapsible"][data-part="opened"])
    )
    [data-scope="collapsible"][data-part="closed"] {
    transform: rotate(-90deg);
  }

  .collapsible
    [data-scope="collapsible"][data-part="content"][data-orientation="vertical"][data-state="open"] {
    animation: collapsible-slide-down 200ms ease;
  }

  .collapsible
    [data-scope="collapsible"][data-part="content"][data-orientation="vertical"][data-state="closed"] {
    animation: collapsible-slide-up 200ms ease;
  }

  .collapsible
    [data-scope="collapsible"][data-part="content"][data-orientation="horizontal"][data-state="open"] {
    animation: collapsible-slide-right 200ms ease;
  }

  .collapsible
    [data-scope="collapsible"][data-part="content"][data-orientation="horizontal"][data-state="closed"] {
    animation: collapsible-slide-left 200ms ease;
  }

  .collapsible [data-scope="collapsible"][data-part="content"] {
    @apply ui-content;
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-orientation="horizontal"]
    [data-scope="collapsible"][data-part="content"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .collapsible [data-scope="collapsible"][data-part="root"][data-loading],
  [data-scope="collapsible"][data-part="root"][data-loading] {
    @apply ui-loading;

    min-height: var(--spacing-size);
    min-width: var(--container-7xs);
  }

  .collapsible
    [data-scope="collapsible"][data-part="root"][data-loading]
    [data-scope="collapsible"][data-part="trigger"],
  [data-scope="collapsible"][data-part="root"][data-loading]
    [data-scope="collapsible"][data-part="trigger"] {
    border-color: var(--color-border);
    background-color: var(--color-ui-active);
    animation: corex-skeleton 1.4s ease-in-out infinite;
    width: 100%;
  }

  @keyframes collapsible-slide-down {
    from {
      opacity: 0.01;
      height: 0;
    }

    to {
      opacity: 1;
      height: var(--height);
    }
  }

  @keyframes collapsible-slide-up {
    from {
      opacity: 1;
      height: var(--height);
    }

    to {
      opacity: 0.01;
      height: 0;
    }
  }

  @keyframes collapsible-slide-right {
    from {
      opacity: 0.01;
      width: 0;
    }

    to {
      opacity: 1;
      width: var(--width);
    }
  }

  @keyframes collapsible-slide-left {
    from {
      opacity: 1;
      width: var(--width);
    }

    to {
      opacity: 0.01;
      width: 0;
    }
  }
}

@utility collapsible--* {
  max-width: --value(--container-*, [length]);

  [data-scope="collapsible"][data-part="root"] {
    gap: --value(--spacing-space-*, [length]);
  }

  [data-scope="collapsible"][data-part="trigger"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    
    background-color: --value(--color-ui, [color]);
    color: --value(--color-ink, [color]);
  }

  [data-scope="collapsible"][data-part="trigger"]:hover {
    background-color: --value(--color-ui-hover, [color]);
  }

  [data-scope="collapsible"][data-part="trigger"]:active {
    background-color: --value(--color-ui-active, [color]);
  }

  [data-scope="collapsible"][data-part="trigger"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px --value(--color-ink, [color]);
  }

  [data-scope="collapsible"][data-part="trigger"][data-state="open"] {
    background-color: --value(--color-*, [color]);
    color: --value(--color-*-ink, [color]);

    &:hover {
      background-color: --value(--color-*-hover, [color]);
    }

    &:active {
      background-color: --value(--color-*-active, [color]);
    }

    &:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
    }

    &:disabled,
    &[data-disabled],
    &[disabled] {
      background-color: --value(--color-*-muted, [color]);
    }
  }

  [data-scope="collapsible"][data-part="trigger"]
    [data-scope="collapsible"][data-part="closed"],
  [data-scope="collapsible"][data-part="trigger"]
    [data-scope="collapsible"][data-part="opened"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
    color: --value(--color-ink, [color]);
  }

  [data-scope="collapsible"][data-part="content"],
  [data-scope="collapsible"][data-part="content"] > p {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }
}