.gui-color-block {
  position: relative;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #fff;
  background-image: conic-gradient(transparent 25%, #ccc 25% 50%, transparent 50% 75%, #ccc 75%);
  background-size: 0.5rem 0.5rem;
}

.gui-color-block-bg {
  display: inline-block;
  width: 100%;
  height: 100%;

  // use the pseudo-elements `::after` to simulate the border for color-block
  &::after {
    display: inline-block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-top-left-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
    border-bottom-left-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
    opacity: 0.24;
    content: '';

    [dir='rtl'] & {
      border-radius: 0;
      border-top-right-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
      border-bottom-right-radius: var(--mat-form-field-filled-container-shape, var(--mat-sys-corner-extra-small));
    }
  }
}

// fix the vertical alignment for icon
.gui-fill {
  .mat-mdc-icon-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}
