@use "../../1-settings/class-vars";

/*
############     _popup.scss      ############
*/
#{class-vars.$base-class} {
  .color-family {
    display: flex;
    margin: 0 0 var(--spacing-2xs) 0;

    &__title {
      margin: 0 var(--spacing-s) 0 0;
      padding: 0 var(--spacing-s);
      color: white;
      border-radius: 999px;
      min-height: unset;
      border: none;
      &#{class-vars.$color-is-light} {
        color: var(--gray-color);
      }
    }
    &__swatches {
      list-style-type: none;
      margin: 0 0 0 auto;
      padding: 0;
      display: flex;
      gap: 2px;
      li {
        padding: 0;
      }
    }
    &__swatch {
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 0;
      min-height: auto;
      padding: 0;
    }
    .selected button {
      border-radius: var(--radius-circle) !important;
      box-shadow: 0 1px 6px rgba($color: black, $alpha: 0.7);
    }
    button .utds-icon-before-check{
      &.is-dark {
        color: white;
      }
      &.is-light {
        color: black;
      }
    }
  }
}