@import '../prefix';

.#{$prefix}--swatch-palettes {
  display: flex;
  flex-flow: wrap;

  .#{$prefix}--swatch-palette {
    width: 100%;
    margin-bottom: $spacing-07;

    .#{$prefix}--swatch {
      padding: $spacing-05;
      @include carbon--type-style('code-02') .#{$prefix}--swatch-name {
        text-transform: capitalize;
      }
      .#{$prefix}--swatch-value {
        float: right;
      }
    }

    @include carbon--breakpoint('md') {
      width: calc(50% - 1px);
      margin-right: 1px;

      &:last-child {
        width: 50%;
        margin-right: 0;
      }
    }
    @include carbon--breakpoint('lg') {
      width: calc(33.33% - 1px);
      margin-right: 1px;

      &:last-child {
        width: 33.33%;
        margin-right: 0;
      }
    }
  }
}

.#{$prefix}--swatch-palettes-container {
  position: relative;
  width: 100%;
  margin-bottom: $spacing-07;

  .sticky-container {
    position: sticky;
    z-index: 8888;
    margin: 0 -1rem;
    padding: 0 $spacing-05;
    background: $ui-01;
    top: 0;

    @include carbon--breakpoint('lg') {
      padding-top: $spacing-05;
    }
  }
}

.#{$prefix}--swatch-palettes__format-switcher {
  position: relative;
  width: 100%;
  height: rem(49px);
  padding-bottom: 1px;

  .#{$prefix}--content-switcher-btn {
    flex: 1;
    width: calc(25% - 1px);
    margin-right: 1px;
    height: rem(48px);
    padding: $spacing-03 $spacing-05;
    outline: none;
    transition: background-color 100ms cubic-bezier(0.2, 0.2, 0.38, 0.9);

    &:not(:last-of-type)::after {
      height: 100%;
      right: -1px;
      top: 0;
    }

    &:not(.#{$prefix}--content-switcher--selected) {
      background-color: $ui-02;
      color: $text-01;

      &:hover {
        background-color: $hover-ui;
      }
    }
  }
}