@import "../../css/colors.css";

.color-button {
    height: 2rem;
    width: 3rem;
    display: flex;
}

.color-button-swatch {
    position: relative;
    display: flex;
    cursor: pointer;
    flex-basis: 2rem;
    flex-shrink: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
}
[theme="dark"] .color-button-swatch {
    border-color: rgba(255, 255, 255, 0.25);
}

[dir="ltr"] .color-button-swatch {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

[dir="rtl"] .color-button-swatch {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.color-button-arrow {
    display: flex;
    user-select: none;
    cursor: pointer;
    flex-basis: 1rem;
    flex-shrink: 0;
    height: 100%;

    border: 1px solid $ui-pane-border;

    align-items: center;
    justify-content: center;
    color: #575e75;
    font-size: 0.75rem;
}

[dir="ltr"] .color-button-arrow {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
}

[dir="rtl"] .color-button-arrow {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.swatch-icon {
    width: 1.75rem;
    margin: auto;
    /* Make sure it appears above the outline box */
    z-index: 2;
}

.outline-swatch:after {
    content: "";
    position: absolute;
    top: calc(0.5rem);
    left: calc(0.5rem);
    width: 0.75rem;
    height: 0.75rem;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.25);
    /* Make sure it appears below the transparent icon */
    z-index: 1;
}