@import "../../../tokens/colors";

// Only used for our documentation site.
// Creates color classes for color utilities.
@mixin doc-color($colors-list) {
  @each $name, $color in $colors-list {
    .pb--color_#{$name} {
      background-color: $color !important;
    }
  }
}
@include doc-color($colors);
@include doc-color($interface_colors);
@include doc-color($main_colors);
@include doc-color($background_colors);
@include doc-color($card_colors);
@include doc-color($active_colors);
@include doc-color($hover_colors);
@include doc-color($border_colors);
@include doc-color($shadow_colors);
@include doc-color($text_colors);
@include doc-color($data_colors);
@include doc-color($status_colors);
@include doc-color($product_colors);

.pb--color_bg_gradient {
  background: $gradient_start;
  background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
  background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
  background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
}

ul {
  &.pb--utlities-color {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px 0 20px 0;
    background: white;
    border-radius: 4px;
    border: 1px solid $border-light;
    padding: 10px;

    li {
      border-radius: 4px;
      margin: 10px 5px;
      position: relative;

      & > div {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin: 20px 15px 45px;
        position: relative;
      }
      &::before {
        content: attr(data-name);
        width: 100%;
        position: absolute;
        top: 105px;
        left: 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
      }
      &::after {
        content: attr(data-variable);
        width: 100%;
        position: absolute;
        top: 124px;
        left: 0;
        text-align: center;
        font-size: 12px;
        opacity: 0.7;
      }

      &.dark {
        background: $bg_dark;
        color: $white;
      }

      &:first-child {
        margin-left: 0;
      }
    }
  }
}