@use "../../wc";

:host {
  display: contents;
}

.container {
  padding-bottom: 50px;
}

.container--scroll {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.container--scroll .scroll-content {
  height: 100%;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

.setting-container__dropdown {
  z-index: 10;
  position: absolute;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: rgba(var(--zn-panel, 0.8));
  box-shadow: var(--zn-shadow-small);
  opacity: 0.7;
  transition-duration: 0.3s;
  transition-property: opacity;

  &:hover {
    background: rgba(var(--zn-panel, 1));
  }

  &--top-end {
    top: var(--zn-base-gap);
    right: calc(var(--zn-base-gap) + var(--zn-gutter));
    bottom: auto;
  }

  &--top-start {
    top: var(--zn-base-gap);
    right: auto;
    left: calc(var(--zn-base-gap) + var(--zn-gutter));
    bottom: auto;
  }

  &--bottom-end {
    bottom: calc(var(--zn-base-gap) + var(--zn-scroll-footer-height, 0px));
    right: calc(var(--zn-base-gap) + var(--zn-gutter));
    top: auto;
  }

  &--bottom-start {
    bottom: calc(var(--zn-base-gap) + var(--zn-scroll-footer-height, 0px));
    left: calc(var(--zn-base-gap) + var(--zn-gutter));
    top: auto;
  }
}

.setting-container__dropdown[open], .setting-container__dropdown:hover {
  opacity: 1;
}

.setting-container__toggle-button::part(icon) {
  rotate: 0deg;
  transition: rotate 0.9s ease-in-out, color 0.9s ease-in-out;
}

.setting-container__dropdown[open] .setting-container__toggle-button::part(icon), .setting-container__toggle-button:hover::part(icon) {
  color: rgb(var(--zn-primary));
  cursor: pointer;
  rotate: 380deg;
}

zn-button {
  border-radius: var(--zn-border-radius);
}

.pull-tab {
  position: absolute;
  top: 0;
  right: calc(var(--zn-base-gap) + var(--zn-gutter));
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-height: 100%;

  &__panel {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    overflow: hidden;
    background-color: rgb(var(--zn-panel));
    border: 1px solid rgb(var(--zn-border-color));
    border-top: none;
    border-bottom-width: 0;
    border-radius: 0 0 0 var(--zn-border-radius);
    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0.22s;
    will-change: grid-template-rows;
  }

  &--open &__panel {
    grid-template-rows: 1fr;
    border-bottom-width: 1px;
    transition: grid-template-rows 0.22s ease, border-bottom-width 0s linear 0s;
  }

  &__panel-content {
    min-height: 0;
    overflow: hidden;

    .settings-container__dropdown-content {
      border: none;
      box-shadow: none;
      border-radius: 0;
      margin-bottom: 0;
      max-width: none;
      width: auto;
    }
  }

  &--expanded &__panel-content {
    overflow-y: auto;
  }

  &__tab {
    flex-shrink: 0;
    background-color: rgb(var(--zn-panel));
    color: rgb(var(--zn-text-heading));
    border: 1px solid rgb(var(--zn-border-color));
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: var(--zn-spacing-x-small);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--zn-spacing-x-small);
    max-height: 36px;
    overflow: hidden;
    margin-top: -1px;

    &:hover {
      background-color: rgb(var(--zn-shadow));
    }

    &:focus-visible {
      outline: 2px solid rgb(var(--zn-primary));
      outline-offset: -2px;
    }
  }
}

.settings-container__dropdown-content {
  display: flex;
  flex-direction: column;
  gap: var(--zn-spacing-small);
  background-color: rgb(var(--zn-panel));
  padding: var(--zn-spacing-small);
  box-shadow: var(--zn-shadow-small);
  border-radius: var(--zn-border-radius);
  max-width: var(--zn-size-mpanel);
  width: fit-content;
  z-index: 20;
  border: 1px solid rgb(var(--zn-border-color));
  margin-bottom: 10px;
}