@use '../abstracts' as *;

/* Molecule color selector */
.m-color-selector {
  display: flex;
  align-items: center;
  font-weight: 400;

  &:hover,
  &:active {
    font-weight: 500;
  }

  &__point {
    width: toRem(20);
    min-width: 1.25rem;
    height: toRem(20);
    border-radius: toRem(10);
    cursor: pointer;

    &__disabled {
      width: toRem(8);
      height: toRem(8);
      margin-right: toRem(5);
      border-radius: toRem(50);
      cursor: default;
    }

    &__icon {
      margin-left: auto;
    }
  }
}

.m-color-selector-overlay {
  display: flex;
  flex-wrap: wrap;
  max-width: toRem(180);
  padding: toRem(5);
  background-color: #dcdcdc;
  border-radius: toRem(5);

  &__point {
    position: relative;
    width: toRem(20);
    height: toRem(20);
    margin: toRem(5);
    border-radius: toRem(50);
    cursor: pointer;

    &__check {
      position: absolute;
      top: toRem(-2);
      left: toRem(-2);
      color: white;
    }
  }
}