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

.settings-bar-right {
  min-inline-size: px2rem(252);
  inline-size: 100%;
  block-size: 100vh;
  position: relative;
  inset-inline-start: unset;
  inset-inline-end: unset;
  grid-area: right-sidebar;
  overflow: hidden;

  &.viewer-code {
    block-size: calc(100vh - $sz-48);
  }
}

.tool-windows {
  block-size: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-s);
}

.shape-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-s);
  align-items: center;
  block-size: $sz-32;
  padding-inline-start: var(--sp-m);
}

.shape-info-subtitle {
  block-size: fit-content;
  align-items: flex-start;
}

.layers-icon,
.shape-icon {
  --icon-stroke-color: var(--color-foreground-primary);

  display: flex;
  justify-content: center;
  align-items: center;
  block-size: $sz-32;
}

.layer-title {
  @include deprecated.body-small-typography;
  @include deprecated.text-ellipsis;

  block-size: $sz-32;
  padding: var(--sp-s) 0;
  color: var(--color-foreground-primary);
}

.layer-title-with-subtitle {
  block-size: fit-content;
  padding-block-end: 0;
}

.layer-subtitle {
  @include deprecated.body-small-typography;
  @include deprecated.text-ellipsis;

  color: var(--assets-item-name-foreground-color-rest);
}

.empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxxl);
  margin: var(--sp-xxxl) auto;
  inline-size: $sz-200;
}

.empty-button {
  display: flex;
  justify-content: center;
}

.inspect-tab-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-s) var(--sp-m) var(--sp-s) var(--sp-m);
  gap: var(--sp-m);
}

.inspect-tab-switcher-label {
  @include use-typography("body-medium");

  color: var(--color-foreground-primary);
  flex: 0 1 40%;
}

.inspect-tab-switcher-controls {
  display: flex;
  align-items: center;
  flex: 1;
  gap: var(--sp-s);
  justify-content: flex-end;
}

.inspect-tab-switcher-controls-color-space {
  // 65px is the minimum size of the switcher to avoid text ellipsis on the options
  flex: 0 0 65px;
}

.inspect-tab-switcher-controls-color-space-select {
  justify-self: end;
}

.inspect-tab-switcher-controls-tab {
  // 110px is the minimum size of the switcher to avoid text ellipsis on the options
  flex: 0 0 110px;
}

.inspect-content {
  overflow: hidden;
}

.viewer-tab-switcher {
  --tabs-nav-padding-inline-start: 0;
  --tabs-nav-padding-inline-end: var(--sp-m);

  overflow: auto;
}