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

.color-bullet {
  position: relative;
  display: flex;
  flex-direction: row;
  inline-size: var(--bullet-size, $sz-24);
  block-size: var(--bullet-size, $sz-24);
  min-inline-size: var(--bullet-size, $sz-24);
  min-block-size: var(--bullet-size, $sz-24);
  border: $b-2 solid var(--color-background-quaternary);
  border-radius: $br-circle;
}

.color-bullet-wrapper {
  display: flex;
  flex-direction: row;
  block-size: 100%;
  inline-size: 100%;
  clip-path: circle(50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.grid-area {
  grid-area: color;
}

.color-bullet.mini {
  inline-size: var(--bullet-size, $sz-16);
  block-size: var(--bullet-size, $sz-16);
  min-inline-size: var(--bullet-size, $sz-16);
  min-block-size: var(--bullet-size, $sz-16);
  margin-block-start: 0;
  border: $b-1 solid var(--color-background-quaternary);
}

.is-not-library-color {
  overflow: hidden;
  border-radius: $br-8;
}

.is-not-library-color .color-bullet-wrapper {
  clip-path: none;
}

.is-not-library-color.mini {
  border-radius: $br-4;
}

.is-gradient {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
    left center;
  background-color: var(--color-static-white);
  transform: rotate(-90deg);
}

.is-transparent {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAExJREFUSIljvHnz5n8GLEBNTQ2bMMOtW7ewiuNSz4RVlIpg1IKBt4Dx////WFMRqakFl/qhH0SjFhAELNRKLaNl0Qi2YLQsGrWAcgAA0gAgQPhT2rAAAAAASUVORK5CYII=")
    left center;
  background-color: var(--color-static-white);
}

.color-bullet .color-bullet-wrapper > * {
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--color-static-white);
}

.color-bullet:hover:not(.read-only) {
  border: $b-2 solid var(--color-accent-primary);
}

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

  inline-size: px2rem(80);
  text-align: center;
  margin-block-start: var(--sp-xxs);
  max-block-size: px2rem(28);
  color: var(--color-foreground-secondary);
}

.color-text.small-text {
  @include text-ellipsis;

  max-block-size: $sz-16;
}

.big-text {
  @include use-typography("body-small");
  @include two-line-text-ellipsis;

  display: inline-block;
  inline-size: fit-content;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: var(--color-foreground-secondary);
  text-align: center;
}

.no-text {
  display: none;
}

.color-row-name {
  color: var(--color-foreground-primary);
}