@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-spacing-medium);
    right: var(--zn-spacing-medium);
    bottom: auto;
  }

  &--top-start {
    top: var(--zn-spacing-medium);
    right: auto;
    left: var(--zn-spacing-medium);
    bottom: auto;
  }

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

  &--bottom-start {
    bottom: calc(var(--zn-spacing-medium) + var(--zn-scroll-footer-height, 0px));
    left: var(--zn-spacing-medium);
    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-medium);
}

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