@import '../styles/variables';

.label {
    font-size: 14px;
    color: $dark-gray;
    margin-block-end: 6px;

    padding-block-start: 0;
    padding-block-end: 0;
}

.input {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 5px;

    border: 1px solid $duda-gray;
    border-radius: 3px;

    &.focused {
        border-color: $text-dark-gray;
    }

    .popover-color-picker {
        width: 315px;
        height: 235px;
    }

    .rectangle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        flex-grow: 0;

        border-radius: 3px;
        border: 1px solid transparent;
        font-size: 15px;
    }

    .text {
        display: flex;
        align-items: center;

        width: 100%;
        margin-inline-start: 15px;

        input {
            border: none;
            padding: 0;
            height: 100%;
            width: 100%;
            text-transform: uppercase;
        }
    }
}