// 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

@import "refactor/common-refactor.scss";

.element-set {
  @include flexColumn;
  margin-bottom: $s-8;
}

.presets {
  display: flex;
  align-items: flex-start;
  gap: $s-4;
}

.presets-wrapper {
  @extend .asset-element;
  position: relative;
  display: flex;
  height: $s-32;
  width: $s-188;
  padding: $s-8;
  border-radius: $br-8;

  .collapsed-icon {
    @include flexCenter;
    cursor: pointer;
    svg {
      @extend .button-icon-small;
      stroke: var(--icon-foreground);
      transform: rotate(90deg);
    }
  }

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

.select-name {
  @include bodySmallTypography;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  cursor: pointer;
}

.custom-select-dropdown {
  @extend .dropdown-wrapper;
  margin-top: $s-2;
  width: $s-252;
  .dropdown-element {
    @extend .dropdown-element-base;
    .name-wrapper {
      display: flex;
      gap: $s-8;
      flex-grow: 1;
      .preset-name {
        color: var(--menu-foreground-color-rest);
      }
      .preset-size {
        color: var(--menu-foreground-color-rest);
      }
    }

    .check-icon {
      @include flexCenter;
      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);
      }
    }
  }
}

.size {
  @include flexRow;
  position: relative;
}

.height,
.width {
  @extend .input-element;
  width: $s-108;
  .icon-text {
    padding-top: $s-1;
  }
  &.disabled {
    @extend .disabled-input;
  }
}

.lock-size-btn {
  @extend .button-tertiary;
  border-radius: $br-8;
  height: $s-32;
  width: $s-28;
  &.selected {
    @extend .button-icon-selected;
  }
}

.lock-ratio-icon {
  @extend .button-icon;
  stroke: var(--icon-foreground);
}

.position {
  @include flexRow;
}

.x-position,
.y-position {
  @extend .input-element;
  width: $s-108;
  .icon-text {
    padding-top: $s-1;
  }
  &.disabled {
    @extend .disabled-input;
  }
}

.rotation-radius {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: $s-4;
}

.rotation {
  @extend .input-element;
  width: $s-108;
  .icon-text {
    padding-top: $s-1;
  }
}
.radius {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: $s-4;
}

.radius-inputs {
  display: flex;
}

.radius-1 {
  @extend .input-element;
  width: $s-108;
  position: relative;
}

.radius-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $s-4;
  .small-input {
    @extend .input-element;
    width: $s-52;
  }
}

.radius-mode {
  @extend .button-tertiary;
  height: $s-32;
  width: $s-28;
  border-radius: $br-8;
  svg {
    @extend .button-icon;
    stroke: var(--icon-foreground);
  }
  &.selected {
    @extend .button-icon-selected;
  }
}

.clip-show {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: $s-4;
}

.clip-content,
.show-in-viewer {
  .clip-content-input {
    display: none;
  }
}

.clip-content-label {
  @extend .button-tertiary;
  height: $s-32;
  width: $s-28;
  border-radius: $br-8;
}

.selected {
  @extend .button-icon-selected;
}

.checkbox-button {
  @extend .button-icon;
}
