@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/colorView/mixins" as *;
@use "../../base/colorView";

// adduse


@include dx-base-colorview-styles($colorview-handle-color, $colorview-handle-border-color);


$material-colorview-alpha-width: $material-colorview-palette-width + 4;
$material-colorview-hue-scale-height: $material-colorview-palette-height;

.dx-colorview-container {
  width: $material-colorview-container-width;

  label {
    line-height: $material-colorview-container-line-height;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &.dx-colorview-label-hex {
      margin: $material-colorview-container-hex-margin;
    }

    &.dx-colorview-alpha-channel-label {
      margin: 0;
      margin-inline-start: $material-colorview-container-alpha-label-margin;
      width: $material-colorview-container-alpha-label-width;
    }

    .dx-texteditor {
      width: $material-colorview-container-textbox-width;
      margin: $material-colorview-container-textbox-margin;
    }
  }
}

.dx-colorview-hue-scale-cell {
  margin-inline-start: $material-colorview-hue-scale-margin;
}

.dx-colorview-palette {
  width: $material-colorview-palette-width;
  height: $material-colorview-palette-height;
}

.dx-colorview-alpha-channel-scale {
  width: $material-colorview-palette-width;
}

.dx-colorview-container-row.dx-colorview-alpha-channel-row {
  margin-top: $material-colorview-alpha-margin;
  display: flex;
  align-items: center;
}

.dx-colorview-hue-scale {
  width: $material-colorview-hue-scale-width;
  height: $material-colorview-hue-scale-height;
}

.dx-colorview-alpha-channel-cell {
  width: $material-colorview-alpha-width;
}

.dx-colorview-hue-scale-wrapper {
  height: $material-colorview-hue-scale-height + 2;
}

.dx-colorview-color-preview {
  width: 100%;
  height: $material-colorview-color-preview-height;
}

.dx-colorview-controls-container {
  width: $material-colorview-controls-container-width;
  margin-inline-start: $material-colorview-controls-container-margin;
}

.dx-colorview-container label { // stylelint-disable-line no-duplicate-selectors
  color: $colorview-label-color;
}

.dx-colorview-palette-cell,
.dx-colorview-alpha-channel-border,
.dx-colorview-hue-scale-wrapper,
.dx-colorview-color-preview-container {
  padding: 1px;
  margin: 1px;
  margin-top: 0;
  background-color: $colorbox-palette-cell-bg;
  box-shadow: 0 0 0 1px $colorview-border-color;
}

.dx-colorview-color-preview-container {
  margin-bottom: $material-colorview-preview-container-margin;
}