@use "@s360-base-theme/ui-core/focus-visible";

details {
  summary {
    align-items: var(--summary--align-items, center);
    background-color: var(--summary--bg-color, transparent);
    color: var(--summary--color);
    cursor: var(--summary--cursor, pointer);
    display: var(--summary--display, inline-flex);
    font-family: var(--summary--font-family);
    font-weight: var(--summary--font-weight);
    font-style: var(--summary--font-style);
    font-size: var(--summary--font-size);
    line-height: var(--summary--line-height);
    margin: var(--summary--margin, 0);
    padding: var(--summary--padding, 0);
    pointer-events: var(--summary--pointer-events, all);
    position: relative;
    text-transform: var(--summary--text-transform);
    transition: var(--summary--transition, all 200ms ease-in-out);

    &::-webkit-details-marker,
    &::marker {
      content: '';
      display: none;
    }

    &:focus-visible {
      @extend %focus-visible;
    }

    &:hover,
    &:focus {
      color: var(--summary--color--active, var(--summary--color));
    }
  }

  &[open] {
    summary {
      margin: var(--summary--margin--open, var(--summary--margin));
      color: var(--summary--color--open, var(--summary--color));
    }
  }
}
