@layer vuetify-components {}
@layer vuetify-overrides {
  .v-color-picker-preview__alpha .v-slider-track__background {
    background-color: transparent;
  }
}
@layer vuetify-components {
  .v-locale--is-ltr.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__alpha .v-slider-track__background {
    background-image: linear-gradient(to right, transparent, var(--v-color-picker-color-hsv));
  }
  .v-locale--is-rtl.v-color-picker-preview__alpha .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__alpha .v-slider-track__background {
    background-image: linear-gradient(to left, transparent, var(--v-color-picker-color-hsv));
  }
  .v-color-picker-preview__alpha .v-slider-track__background::after {
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
    border-radius: inherit;
  }
  .v-color-picker-preview__sliders {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding-inline-end: 8px;
  }
  .v-color-picker-preview__dot {
    position: relative;
    height: 30px;
    width: 30px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAACRJREFUKFNjPHTo0H8GJGBnZ8eIzGekgwJk+0BsdCtRHEQbBQBbbh0dIGKknQAAAABJRU5ErkJggg==) repeat;
    border-radius: 50%;
    overflow: hidden;
    margin-inline-end: 24px;
  }
  .v-color-picker-preview__dot > div {
    width: 100%;
    height: 100%;
  }
  .v-locale--is-ltr.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-ltr .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
    background: linear-gradient(to right, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
  }
  .v-locale--is-rtl.v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background, .v-locale--is-rtl .v-color-picker-preview__hue:not(.v-input--is-disabled) .v-slider-track__background {
    background: linear-gradient(to left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
  }
  .v-color-picker-preview__track {
    position: relative;
    width: 100%;
  }
}
@layer vuetify-overrides {
  .v-color-picker-preview__track {
    margin: 0;
  }
}
@layer vuetify-components {
  .v-color-picker-preview__track .v-slider-track__fill {
    display: none;
  }
  .v-color-picker-preview {
    align-items: center;
    display: flex;
    margin-bottom: 0;
  }
  .v-color-picker-preview__eye-dropper {
    position: relative;
    margin-right: 12px;
  }
  @media (forced-colors: active) {
    .v-color-picker-preview__dot {
      border-style: solid;
    }
    .v-color-picker-preview__dot > div {
      forced-color-adjust: preserve-parent-color;
    }
    .v-color-picker-preview__sliders {
      forced-color-adjust: preserve-parent-color;
    }
    .v-color-picker-preview .v-slider-thumb__surface {
      background: transparent;
      border: solid canvastext;
    }
  }
}