/* Default variables */
:root {
  --react-coolors-border-radius: 14px;
  --react-coolors-color-shadow: rgb(0 0 0 / 8%);
  --react-coolors-color-text-dark: #fff;
  --react-coolors-color-text-font: var(--react-coolors-widget-font);
  --react-coolors-color-text-light: #000;
  --react-coolors-color-hover-basis: 80px;
  --react-coolors-color-font-size: 15px;
  --react-coolors-info-color: inherit;
  --react-coolors-info-font-size: 14px;
  --react-coolors-info-height: 36px;
  --react-coolors-info-link-hover-decoration: underline;
  --react-coolors-info-link-hover-color: var(--react-coolors-info-link);
  --react-coolors-info-link: #06f;
  --react-coolors-widget-bg: #fff;
  --react-coolors-widget-font: sans-serif;
  --react-coolors-widget-height: 150px;
  --react-coolors-widget-shadow: rgb(0 0 0 / 11%);
}

.coolors-palette-widget {
  all: initial;
  background: var(--react-coolors-widget-bg);
  border-radius: var(--react-coolors-border-radius);
  box-shadow: inset var(--react-coolors-widget-shadow) 0 0 0 1px;
  display: block;
  height: var(--react-coolors-widget-height);
  overflow: hidden;

  .colors {
    all: initial;
    display: flex;
    height: calc(var(--react-coolors-widget-height) - var(--react-coolors-info-height));
    width: 100%;

    .color-box {
      all: initial;
      box-shadow: inset var(--react-coolors-color-shadow) 0 1px, inset var(--react-coolors-color-shadow) 0 -1px;
      cursor: default;
      flex-basis: 1px;
      flex-grow: 1;
      overflow: hidden;
      position: relative;
      transition: flex-basis 0.1s ease-in-out;

      &:first-child {
        border-radius: var(--react-coolors-border-radius) 0 0;
        box-shadow: inset var(--react-coolors-color-shadow) 1px 1px, inset var(--react-coolors-color-shadow) 0 -1px;
      }

      &:last-child {
        border-radius: 0 var(--react-coolors-border-radius) 0 0;
        box-shadow: inset var(--react-coolors-color-shadow) -1px 1px, inset var(--react-coolors-color-shadow) 0 -1px;
      }

      &:hover {
        flex-basis: var(--react-coolors-color-hover-basis);

        .color-code {
          opacity: 1;
        }
      }

      &.clickable {
        &,
        .color-code {
          cursor: pointer;
        }
      }

      &.is-light .color-code {
        color: var(--react-coolors-color-text-light);
      }

      .color-code {
        all: initial;
        color: var(--react-coolors-color-text-dark);
        display: block;
        font-family: var(--react-coolors-color-text-font);
        font-size: var(--react-coolors-color-font-size);
        -webkit-font-smoothing: antialiased;
        font-weight: 600;
        margin-top: calc(var(--react-coolors-color-font-size) * -0.5);
        opacity: 0;
        text-align: center;
        transition: opacity 0.1s ease-in-out;
        width: 100%;
      }
    }
  }

  .info {
    all: initial;
    display: flex;
    height: var(--react-coolors-info-height);
    justify-content: space-between;
    padding: 0 15px;
    position: relative;
  }

  .info-name {
    all: initial;
    color: var(--react-coolors-info-color);
    font-family: var(--react-coolors-widget-font);
    font-size: var(--react-coolors-info-font-size);
    -webkit-font-smoothing: antialiased;
    line-height: var(--react-coolors-info-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info-link {
    all: initial;
    color: var(--react-coolors-info-link);
    cursor: pointer;
    font-family: var(--react-coolors-widget-font);
    font-size: var(--react-coolors-info-font-size);
    line-height: var(--react-coolors-info-height);
    margin-left: 20px;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--react-coolors-info-link-hover-color);
      text-decoration: var(--react-coolors-info-link-hover-decoration);
    }
  }
}