@import '../../styles/common.scss';

.container {
  @include boxSizing;

  height: 100%;

  display: grid;
  grid: 1fr / 1fr;

  .wrapper {
    height: 100%;

    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: 1fr;

    background-color: var(
      --explorer-background-color,
      $explorer-background-color
    );

    .header {
      display: grid;
      grid-template-columns: 50px auto;
      align-items: center;

      background-color: var(
        --accordion-header-background-color,
        $accordion-header-background-color
      );

      color: var(--accordion-header-text-color, $accordion-header-text-color);
      font-weight: bold;

      border-bottom: solid 1px var(--accordion-header-border-color, $accordion-header-border-color);

      top: 0;
      position: sticky;
      z-index: 2;
    }

    .button {
      transition: transform 200ms ease;

      svg {
        height: 40%;
      }

      svg * {
        stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
      }

      &.disabled {
        svg * {
          stroke: var(
            --accordion-item-arrow-disabled-color,
            $accordion-item-arrow-disabled-color
          );
        }
      }

      &.rotated {
        transform: rotate(90deg);
      }
    }
  }
}
