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

.attributes-image-as-color-row {
  max-inline-size: px2rem(240);
}

.attributes-color-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--sp-xs);
  align-items: center;
}

.attributes-color-row {
  @extend %attr-row;
}

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

.format-wrapper {
  inline-size: px2rem(72);
  block-size: $sz-32;
}

.image-format {
  @include use-typography("headline-small");

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

.select-format-wrapper {
  inline-size: 100%;
  padding: var(--sp-s) var(--sp-xxs);
  background-color: transparent;
  border-color: transparent;
  color: var(--color-foreground-secondary);
}

.format-info {
  @include use-typography("body-small");

  padding-left: var(--sp-xxs);
  color: var(--color-foreground-secondary);
}

.color-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-xs);
  flex-grow: 1;
  max-inline-size: px2rem(144);

  button {
    visibility: hidden;
    min-inline-size: px2rem(28);
  }

  &:hover button {
    visibility: visible;
  }
}

.one-line {
  max-block-size: $sz-32;
}

.two-line {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sp-xs);
}

.color-name-wrapper {
  @include use-typography("body-small");

  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-s);
  padding-inline-end: var(--sp-xs);
  block-size: $sz-32;
  max-inline-size: px2rem(80);
}

.first-row {
  display: grid;
  grid-template-columns: 1fr px2rem(28);
}

.name-opacity {
  line-height: $sz-16;
  display: grid;
  grid-template-columns: 1fr auto;
}

.color-value-wrapper {
  @include use-typography("body-small");
  @include text-ellipsis;

  color: var(--menu-foreground-color);
  text-transform: uppercase;
}

.gradient-name {
  text-transform: none;
}

.opacity-info {
  @include use-typography("body-small");

  color: var(--menu-foreground-color);
  text-transform: uppercase;
  inline-size: 100%;
}

.second-row {
  min-block-size: $sz-16;
  inline-size: 100%;
  text-align: left;
  margin: 0;
  padding: 0;
}

.color-name-library {
  @include use-typography("body-small");

  color: var(--color-foreground-secondary);
  overflow-wrap: break-word;
}

.image-download {
  grid-column: 1 / 4;
}

.download-button {
  justify-content: center;
  inline-size: 100%;
  margin-block-start: var(--sp-xs);
}

.image-wrapper {
  background-color: var(--menu-background-color);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: px2rem(248);
  block-size: px2rem(160);
  max-block-size: px2rem(160);
  max-inline-size: px2rem(248);
  margin: var(--sp-s) 0;
  border-radius: $br-8;
}

.resolved-image {
  block-size: 100%;
  inline-size: 100%;
  object-fit: contain;
}