.gui-fill-picker {
  display: block;
  width: 15rem;
  border-radius: 0.5rem;
  background-color: var(--mat-expansion-container-background-color, var(--mat-sys-surface));
  color: var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));
  box-shadow:
    inset 0 0 1px 0 rgba(255, 255, 255, 0.64),
    0 2px 4px 0 rgba(0, 0, 0, 0.16),
    0 8px 16px 0 rgba(0, 0, 0, 0.12),
    0 0 1px 0 rgba(0, 0, 0, 0.12);

  color-chrome {
    display: block;

    .chrome-picker {
      width: auto;
      background: none;
      box-shadow: none;
      border-radius: 0;
      font-family: inherit;
    }

    .saturation {
      border-radius: 0.25rem;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.12);
    }

    .chrome-body {
      padding: 1rem 0 0;
    }

    .chrome-swatch {
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.12);
    }

    .chrome-active {
      box-shadow: none;
    }

    .alpha-checkboard {
      background-color: #fff;
      border-radius: 2px;
    }

    .alpha-gradient {
      border-radius: 2px;
    }

    .chrome-wrap {
      gap: 0.75rem;
      align-items: center;
    }

    .chrome-fields {
      gap: 0.5rem;
      margin: 0;
    }

    .chrome-field {
      padding: 0;
    }

    .wrap {
      width: 100%;
      line-height: 1;

      input {
        background-color: transparent;
        box-shadow: none !important;
        color: var(--mat-form-field-outlined-input-text-color, var(--mat-sys-on-surface)) !important;
        border: 1px solid var(--mat-form-field-outlined-outline-color, var(--mat-sys-outline)) !important;
      }
    }

    .chrome-toggle {
      display: flex;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0.125rem;
      border-radius: 2px;

      &:hover {
        background: rgba(0, 0, 0, 0.04);
      }
    }

    .chrome-icon {
      margin: 0;
    }

    .chrome-toggle-svg {
      width: 1.25rem;
      height: 1.25rem;
      border: none;

      &:hover {
        background: transparent;
      }

      path {
        fill: var(--mat-icon-button-icon-color, var(--mat-sys-on-surface-variant));
      }
    }
  }

  .gradient-picker {
    --gp-container-width: auto;
    --gp-container-vertical-padding: 0;
    --gp-container-margin: -4px -12px;
    --gp-container-shape: 0;
    --gp-container-elevation-shadow: none;
    --gp-container-background-color: transparent;
    --gp-container-text-color: var(--mat-form-field-filled-input-text-color, var(--mat-sys-on-surface));
    --gp-input-background-color: var(--mat-form-field-filled-container-color, var(--mat-sys-surface-variant));
  }
}

.gui-fill-picker-header {
  padding: 0.375rem 0.375rem 0;
  line-height: 1;

  --mat-button-toggle-shape: 0;
  --mat-button-toggle-height: 1;

  .mat-button-toggle-group-appearance-standard {
    gap: 0.25rem;
    border: none;

    .mat-button-toggle-appearance-standard + .mat-button-toggle-appearance-standard {
      border: none;
    }
  }

  .mat-button-toggle-appearance-standard {
    border-radius: 0.25rem;

    .mat-button-toggle-label-content {
      padding: 0;
    }
  }
}

.gui-fill-picker-body {
  padding: 0.75rem;
}
