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

@layer payload-default {
  .list-header {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: calc(var(--base) * 0.8);

    h1 {
      margin: 0;
    }
  }

  .list-drawer {
    &__header {
      margin-top: base(2.5);
      width: 100%;

      @include mid-break {
        margin-top: base(1.5);
      }
    }

    &__header-wrap {
      display: flex;
      gap: base(1);
    }

    &__header-content {
      display: flex;
      flex-wrap: wrap;
      flex-grow: 1;
      align-items: flex-start;
      align-items: center;

      button .pill {
        pointer-events: none;
        margin: 0;
        top: 4px;
        margin-left: base(0.5);
      }
    }

    &__header-text {
      margin: 0;
    }

    &__header-close {
      flex-shrink: 0;
    }

    &__toggler {
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: inherit;
      border-radius: var(--style-radius-s);

      &:focus:not(:focus-visible),
      &:focus-within:not(:focus-visible) {
        outline: none;
      }

      &:focus-visible {
        outline: var(--accessibility-outline);
        outline-offset: var(--accessibility-outline-offset);
      }

      &:disabled {
        pointer-events: none;
      }
    }

    &__header-close {
      border: 0;
      background-color: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      overflow: hidden;
      width: base(1);
      height: base(1);

      svg {
        width: base(2);
        height: base(2);
        position: relative;
        inset-inline-start: base(-0.5);
        top: base(-0.5);

        .stroke {
          stroke-width: 2px;
          vector-effect: non-scaling-stroke;
        }
      }
    }

    &__select-collection-wrap {
      margin-top: base(1);
    }

    &__first-cell {
      border: 0;
      background-color: transparent;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      text-align: left;
      white-space: nowrap;
    }

    @include mid-break {
      .collection-list__header {
        margin-bottom: base(0.5);
      }

      &__select-collection-wrap {
        margin-top: calc(var(--base) / 2);
      }

      &__header-content {
        button .pill {
          top: 2px;
        }
      }
    }
  }
}
