// 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 "refactor/common-refactor.scss" as deprecated;

.element-set {
  margin: 0;
}

.element-set-content {
  display: flex;
  gap: deprecated.$s-4;
}

.constraints-widget {
  background-color: var(--constraint-widget-background-color);
  display: grid;
  grid-template: "top top top" deprecated.$s-24 "left center right" deprecated.$s-60 "bottom bottom bottom" deprecated.$s-24 / deprecated.$s-24 deprecated.$s-60 deprecated.$s-24;
  height: deprecated.$s-108;
  width: deprecated.$s-108;
  border-radius: deprecated.$br-8;
}

.constraints-top,
.constraints-left,
.constraints-center,
.constraints-right,
.constraints-bottom {
  @include deprecated.flex-center;

  grid-area: top;
}

.constraint-btn,
.constraint-btn-special,
.constraint-btn-rotated {
  @include deprecated.button-style;
  @include deprecated.flex-center;

  width: 100%;
  height: 100%;

  --resalted-area-background-color: var(--button-constraint-background-color-rest);
  --resalted-area-border-color: none;

  &.active {
    --resalted-area-border-color: var(--button-constraint-border-color-hover);
    --resalted-area-background-color: var(--button-constraint-background-color-hover);
  }

  &:hover,
  &:focus-visible {
    --resalted-area-border-color: var(--button-constraint-border-color-hover);
    --resalted-area-background-color: var(--button-constraint-background-color-hover);
  }
}

.resalted-area {
  width: deprecated.$s-32;
  height: deprecated.$s-3;
  border-radius: deprecated.$br-8;
  background-color: var(--resalted-area-background-color);
  outline: deprecated.$s-4 solid var(--resalted-area-border-color);
  padding: 0;
  margin: 0;
}

.constraints-left {
  grid-area: left;

  .constraint-btn-rotated {
    height: deprecated.$s-60;
    width: deprecated.$s-24;

    .resalted-area {
      height: deprecated.$s-32;
      width: deprecated.$s-3;
    }
  }
}

.constraints-center {
  grid-area: center;
  position: relative;
  background-color: var(--constraint-center-area-background-color);
  border-radius: deprecated.$br-8;

  .constraint-btn {
    width: deprecated.$s-60;
    height: deprecated.$s-24;

    .resalted-area {
      width: deprecated.$s-32;
      height: deprecated.$s-3;
    }
  }

  .constraint-btn-special {
    position: absolute;
    height: deprecated.$s-60;
    width: deprecated.$s-24;

    .resalted-area {
      height: deprecated.$s-32;
      width: deprecated.$s-3;
    }
  }
}

.constraints-right {
  grid-area: right;

  .constraint-btn-rotated {
    height: deprecated.$s-72;
    width: deprecated.$s-24;

    .resalted-area {
      height: deprecated.$s-32;
      width: deprecated.$s-3;
    }
  }
}

.constraints-bottom {
  grid-area: bottom;
}

.constraints-selects {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.horizontal-select,
.vertical-select {
  width: deprecated.$s-124;
  padding: 0;
}

.checkbox {
  display: flex;
  align-items: center;
  margin-bottom: deprecated.$s-8;
  margin-top: deprecated.$s-8;
  padding-left: 0;

  input {
    margin: 0;
  }

  label {
    @include deprecated.body-small-typography;

    display: flex;
    align-items: center;
    gap: deprecated.$s-2;
    cursor: pointer;
    color: var(--input-checkbox-text-foreground-color);

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

      width: deprecated.$s-16;
      height: deprecated.$s-16;
      border-radius: deprecated.$br-6;
      background-color: var(--input-checkbox-inactive-background-color);

      &.checked {
        background-color: var(--input-checkbox-background-color-active);

        svg {
          @extend %button-icon-small;

          stroke: var(--input-details-color);
        }
      }

      &:hover {
        border-color: var(--input-checkbox-border-color-hover);
      }

      &:focus {
        border-color: var(--input-checkbox-border-color-focus);
      }
    }
  }
}