// 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;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
@use "ds/_utils.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as t;

// This code should be remove when numeric-input-tokens are activated
// https://tree.taiga.io/project/penpot/task/13704
.element-set-content {
  @include sidebar.option-grid-structure;

  block-size: $sz-32;
  margin-block-end: var(--sp-s);

  .select {
    grid-column: span 4;
    padding: 0;
  }

  .input {
    @extend %input-element;
    @include t.use-typography("body-small");

    grid-column: span 2;
  }

  .actions {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
  }

  &.hidden {
    .hidden-select {
      cursor: default;
      pointer-events: none;
      box-sizing: border-box;
      color: var(--input-foreground-color-disabled);
      stroke: var(--input-foreground-color-disabled);
      background-color: transparent;
      border: $b-1 solid var(--input-border-color-disabled);
    }

    .input {
      cursor: default;
      pointer-events: none;
      box-sizing: border-box;
      color: var(--input-foreground-color-disabled);
      stroke: var(--input-foreground-color-disabled);
      background-color: transparent;
      border: $b-1 solid var(--input-border-color-disabled);

      .icon {
        stroke: var(--input-foreground-color-disabled);
      }

      .numeric-input {
        color: var(--input-foreground-color-disabled);
      }
    }
  }
}

// This code should remain when numeric-input-tokens are activated
// https://tree.taiga.io/project/penpot/task/13704

// This rule should be rename when numeric-input-tokens are
// activated removing the token reference on the class
.element-set-content-token {
  @include sidebar.option-grid-structure;

  block-size: $sz-32;
  margin-block-end: var(--sp-s);
  grid-template-columns: var(--grid-exception-input-width) var(--grid-exception-input-width-small) auto auto;
}

.hidden-select {
  cursor: default;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--input-foreground-color-disabled);
  stroke: var(--input-foreground-color-disabled);
  background-color: transparent;
  border: $b-1 solid var(--input-border-color-disabled);
}

.numeric-input-wrapper {
  --dropdown-offset: #{px2rem(-35)};
}