.dazzler-extra-color-picker {
  position: relative;

  .dazzler-color-picker-toggle {
    padding: 0.25rem;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    &:hover {
      background: $neutral-dark;
    }

    .toggle-button-color {
      width: 1rem;
      height: 1rem;
      border: $neutral-dark 1px solid;
    }
  }
  .dazzler-color-picker {
    position: absolute;
    height: auto;
    width: auto;

    transition: transform 0.6s ease-out;
    transform: scale(0);
    transition-delay: 0.1s;

    &.toggle-direction-top {
      transform-origin: top;
      top: 1.25rem;
    }

    &.toggle-direction-top-left {
      transform-origin: top left;
      left: 1.25rem;
    }
    &.toggle-direction-top-right {
      transform-origin: top right;
      right: 1.25rem;
    }
    &.toggle-direction-left {
      transform-origin: left;
      left: 1.25rem;
    }
    &.toggle-direction-right {
      transform-origin: right;
      right: 1.25rem;
    }
    &.toggle-direction-bottom {
      transform-origin: bottom;
      bottom: 1.25rem;
    }
    &.toggle-direction-bottom-left {
      transform-origin: bottom left;
      bottom: 1.25rem;
      left: 1.25rem;
    }
    &.toggle-direction-bottom-right {
      transform-origin: bottom right;
      bottom: 1.25rem;
      right: 1.25rem;
    }
  }

  &.active {
    .dazzler-color-picker {
      transform: scale(1);
    }
  }
}
