@use "sass:map";
@use "../../../../styles/cunningham-tokens" as *;
@use "../../../../styles/utils" as *;

.message-form {
    display: flex;
    flex-direction: column;
    gap: var(--c--globals--spacings--base);
}

.form-field-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.form-field-options {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--2xs);
    margin-right: -16px;
}

.form-field-row--hidden {
    display: none;
}

.form-field-save-time {
    display: inline-flex;
    justify-content: flex-end;
    font-size: var(--c--globals--font--sizes--xs);
    text-align: right;
    color: var(--c--contextuals--content--semantic--neutral--secondary);
    width: 100%;
}

.form-footer {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
}

.dropdown-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    & > .c__button:has(+ .c__dropdown-menu-trigger) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right-width: 0;
        padding-right: 8px;
    }
    & > .c__dropdown-menu-trigger > .c__button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-width: 0;
        width: 30px;
    }
}


.message-reply-form__error {
    width: 100%;
}

.attachment-uploader {
    padding: var(--c--globals--spacings--base);
    background-color: var(--c--components--forms-input--background-color);
    border-radius: var(--c--components--forms-input--border-radius);
    border-width: var(--c--components--forms-input--border-width);
    border-color: var(--c--components--forms-input--border-color);
    border-style: var(--c--components--forms-input--border-style);
    display: flex;
    flex-direction: column;
    transition:
        border var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out),
        border-radius var(--c--globals--transitions--duration) var(--c--globals--transitions--ease-out);
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    &:not(.attachment-uploader--disabled) {
        &:hover {
            border-radius: var(--c--components--forms-select--border-radius--hover);
            box-shadow: var(--c--components--forms-select--border-color--hover) 0 0 0 1px;
            border-color: var(--c--components--forms-select--border-color--hover);
        }

        &:focus-within,
        &.attachment-uploader--focus {
            border-radius: var(--c--components--forms-select--border-radius--focus);
            box-shadow: var(--c--components--forms-select--border-color--focus) 0 0 0 1px;
            border-color: var(--c--components--forms-select--border-color--focus);

            label {
            color: var(--c--components--forms-select--label-color--focus);
            }
        }
    }
}

.c__field--error > .attachment-uploader:not(.attachment-uploader--disabled) {
    border-color: var(--c--contextuals--border--semantic--error--secondary);

    &:hover {
        border-color: var(--c--contextuals--border--semantic--error--primary);
        box-shadow: var(--c--contextuals--border--semantic--error--primary) 0 0 0 1px;

        label {
          color: var(--c--contextuals--content--semantic--error--primary);
        }
    }
}

.attachment-uploader--disabled {
    cursor: not-allowed;
    border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
    color: var(--c--components--forms-input--placeholder-color);

    & .attachment-uploader__input__helper-text {
        color: var(--c--components--forms-select--value-color--disabled);
    }

    & + .c__field__footer .c__field__text,
    & + .c__field__footer .c__field__text__right {
        color: var(--c--components--forms-field--color);
    }
}

.attachment-uploader__dropzone {
    position: absolute;
    inset: -1px;
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: color-mix(in srgb, var(--c--contextuals--background--semantic--brand--secondary) 90%, transparent);
    border-radius: var(--c--components--forms-select--border-radius--hover);
    border: 2px dashed var(--c--contextuals--border--semantic--brand--secondary);
    color: var(--c--contextuals--content--semantic--brand--primary);
    transition: all 200ms ease-out;
    z-index: 1;
}

.attachment-uploader__dropzone--hidden {
    opacity: 0;
    backdrop-filter: blur(0px);
    visibility: hidden;
}

.attachment-uploader__dropzone .material-icons {
    font-size: 2.25rem;
}

.attachment-uploader__input {
    display: flex;
    flex-direction: row;
    gap: var(--c--globals--spacings--xs);
    align-items: center;
    flex-wrap: wrap;
}

.attachment-uploader__input > .c__button {
    white-space: nowrap;
}

.attachment-uploader__input__helper-text {
    font-size: var(--c--globals--font--sizes--sm);
    color: var(--c--contextuals--content--semantic--neutral--secondary);
}

.attachment-uploader__bucket {
    margin-top: var(--c--globals--spacings--base);
}

.attachment-bucket__counter {
    margin-bottom: var(--c--globals--spacings--sm);
}

.attachment-bucket__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
    gap: 10px;
}

.drive-attachment-picker {
    flex-shrink: 0;
}

.drive-attachment-picker:disabled {
    pointer-events: none;
}

.drive-attachment-picker[aria-busy="true"] {
    cursor: wait;
    pointer-events: auto;
}
