@use '../../../styles/Mixins/' as *;

.parameters-panel-wrapper-enter {
  transform: translateX(-150%);
}

.parameters-panel-wrapper-enter-active {
  transform: translateX(0);
  transition: all 120ms ease-out;
}

.parameters-panel-wrapper-exit {
  transform: translateX(0);
}

.parameters-panel-wrapper-exit-active {
  transform: translateX(-150%);
  transition: all 120ms ease-out;
}

.parameters-panel-wrapper {
  background-color: var(--background-color);
  height: $app-content-height;
  width: $options-bar-max-width;
  max-width: $options-bar-max-width;

  flex-shrink: 0;
  position: relative;
  overflow-y: scroll;
  @include HideScrollbar;

  .parameters-panel {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    height: 100%;
    @include HideScrollbar;
    background-color: var(--background-color);
  }

  &[data-pinned='false'] {
    z-index: 20;

    position: fixed;
    top: 0;
    left: 0;
    filter: var(--floating-panel-drop-shadow);
    width: calc($options-bar-max-width + 2rem);
    max-width: calc($options-bar-max-width + 2rem);
    height: 100%;

    .parameters-panel-margin {
      margin: 1rem;
    }
  }

  .parameters-panel-pin-button {
    position: absolute;
    cursor: pointer;
    padding: 0.5rem;
    top: 1rem;
    right: 1rem;
    z-index: 20;

    &[data-selected='true'] {
      top: 0;
      right: 0;
    }
    svg {
      opacity: 0.5;
    }
  }
}

.invoke-ai-logo-wrapper {
  display: flex;
  align-items: center;
  column-gap: 0.7rem;
  padding-left: 0.5rem;
  padding-top: $progress-bar-thickness;

  img {
    width: 32px;
    height: 32px;
  }

  h1 {
    font-size: 1.4rem;
  }
}