.o-mail-Composer {
    grid-template-areas:
        "sidebar-header core-header"
        "sidebar-main core-main"
        "sidebar-footer core-footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;

    &.o-hasSelfAvatar {
        grid-template-columns: $o-mail-Message-sidebarWidth 1fr;
    }

    .o-mail-Composer-sidebarMain {
        padding-top: 0.1875rem; // avatar centered with composer text input: 36px (avatar) + 2*3px (this value) = 20px + 2 * { 10px (padding) + 1px (border) }
        width: 48px;
    }

    .o-mail-Composer-coreHeader {
        grid-area: core-header;
    }

    .o-mail-Composer-coreMain {
        grid-area: core-main;
    }

    .o-mail-Composer-sidebarMain {
        grid-area: sidebar-main;
    }

    .o-mail-Composer-footer {
        grid-area: core-footer;
    }

    &.o-chatWindow .o-mail-Composer-mainActions {
        margin-top: map-get($spacers, 1) / 2;
    }
}

.o-mail-Composer-actions {

    button {
        opacity: 75%;
        @media (hover: hover) {
            &:hover {
                background-color: $gray-200;
                opacity: 100%;

                .o-mail-Message.o-editing & {
                    background-color: rgba(0, 0, 0, 0.05);
                }
            }
        }
        &:disabled {
            --btn-active-color: var(--btn-disabled-color);
            --btn-hover-color: var(--btn-disabled-color);
            opacity: var(--btn-disabled-opacity);
        }
    }
}

.o-mail-Composer-quickActions .o-mail-Composer-mainActions {
    margin-top: map-get($spacers, 2) - map-get($spacers, 1) / 2;
}

.o-mail-Composer-bg {
    background-color: var(--mail-Composer-bg, $o-view-background-color);
}

.o-mail-Composer-inputStyle {
    padding-top: 10px; // carefully crafted to have the text in the middle in chat window
    padding-bottom: 10px;
    padding-left: (map-get($spacers, 2) + map-get($spacers, 3)) / 2;
    padding-right: (map-get($spacers, 2) + map-get($spacers, 3)) / 2;

    line-height: 1.42857143 !important; // so that input is rounded to 20px = 14px (base font) * 1.42857143 (line-height)

    .o-mail-Composer.o-chatWindow & {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .o-mail-Composer.o-editing & {
        padding-left: map-get($spacers, 2);
        padding-right: map-get($spacers, 2);
    }
}

.o-mail-Composer-input {
    font-family: "text-emoji", $font-family-base;
    max-height: Min(100px, 60vh);
    resize: none;

    .o-mail-Composer.o-chatWindow & {
        @media (min-height: 325px) {
            max-height: Min(350px, 70vh);
        }
    }
    .o-mail-Composer.o-chatWindowBig & {
        @media (min-height: 325px) {
            max-height: Min(550px, 70vh);
        }
    }

    .o-mail-Composer.o-discussApp & {
        @media (min-height: 425px) {
            max-height: 50vh;
        }
    }

    .o-mail-Composer.o-extended & {
        max-height: Min(400px, 30vh);
    }

    &::placeholder {
        opacity: 75%;
        @include text-truncate();
    }
}

.o-mail-Composer-avatar {
    --Avatar-size: #{$o-mail-Avatar-size};
}

.o-mail-Composer-fake {
    height: 0;
    top: -10000px;
}

.o-mail-Composer-compactContainer {
    --border-opacity: 0.75;

    &.o-iosPwa:not(:focus-within) {
        margin-bottom: map-get($spacers, 5) !important;
    }

    &:has(textarea:focus) {
        --border-opacity: 0.35;
        border-color: rgba($o-action, var(--border-opacity)) !important;
    }
}
