// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/_sizes.scss" as *;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@use "refactor/common-refactor.scss" as deprecated;

.presets {
  @include sidebar.option-grid-structure;

  grid-column: 1 / -1;
}

.presets-wrapper {
  @extend %asset-element;

  position: relative;
  grid-column: span 6;
  display: flex;
  height: deprecated.$s-32;
  padding: deprecated.$s-8;
  border-radius: deprecated.$br-8;

  .collapsed-icon {
    @include deprecated.flex-center;

    cursor: pointer;

    svg {
      @extend %button-icon-small;

      stroke: var(--icon-foreground);
      transform: rotate(90deg);
    }
  }

  &:hover {
    .collapsed-icon svg {
      stroke: var(--input-foreground-color-active);
    }
  }
}

.radio-buttons {
  grid-column: span 2;
}

.select-name {
  @include deprecated.body-small-typography;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  cursor: pointer;
}

.custom-select-dropdown {
  @extend %dropdown-wrapper;

  margin-top: deprecated.$s-2;
  max-height: 70vh;
  width: deprecated.$s-252;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preset-search {
  padding: deprecated.$s-4;
  border-bottom: deprecated.$s-1 solid var(--menu-border-color-rest, transparent);
}

.preset-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;

  .dropdown-element {
    @extend %dropdown-element-base;

    .name-wrapper {
      display: flex;
      gap: deprecated.$s-8;
      flex-grow: 1;

      .preset-name {
        color: var(--menu-foreground-color-rest);
      }

      .preset-size {
        color: var(--menu-foreground-color-rest);
      }
    }

    .check-icon {
      @include deprecated.flex-center;

      svg {
        @extend %button-icon-small;

        stroke: var(--icon-foreground);
      }
    }

    &.disabled {
      pointer-events: none;
      cursor: default;

      .preset-name {
        color: var(--menu-foreground-color);
      }
    }

    &.match {
      .name-wrapper .preset-name {
        color: var(--menu-foreground-color-hover);
      }

      .check-icon svg {
        stroke: var(--menu-foreground-color-hover);
      }
    }

    &:hover {
      background-color: var(--menu-background-color-hover);

      .name-wrapper .preset-name {
        color: var(--menu-foreground-color-hover);
      }

      .check-icon svg {
        stroke: var(--menu-foreground-color-hover);
      }
    }
  }
}