@import '../../constants/styles.scss';

%cell {
  flex: 1 0 28px;
  height: 26px;
  display: flex;
  margin: 0 1px;

  @include mobile {
    height: 30px;
    margin: 0 1.2px;
  }
}

.ColorPalette {
  margin-top: 6px;
  display: flex;
  flex-direction: column;

  .row {
    display: flex;
    flex-direction: row;
    margin: 1px 0;

    &:nth-child(4) {
      .cell:nth-child(1), .cell:nth-child(2) {
        border: 1px solid #e0e0e0;
        overflow: hidden;
        background-color: $white;
      }
    }

    .cell {
      @extend %cell;
      position: relative;
      justify-content: center;
      align-items: center;
      border-radius: 1px;
      border: 1px solid transparent;

      @include mobile {
        height: 30px;
        margin: 0 1.2px;
      }

      &:hover {
        cursor: pointer;
      }
    
      .check-mark {
        width: 20px;
        height: 20px;

        &.dark {
          color: rgba(0, 0, 0, 0.54);
        }

        &.bright {
          color: rgba(255, 255, 255, 0.70);
        }
      }
    }
  }

  .dummy-cell {
    @extend %cell;
  }
}