@import "variables";
@import "commons";
@import "panel";
@import "buttons";
@import "mixins";
$btn-send-status-width: 60px;
$counter-width: 90px;

// @import "~@ctrl/ngx-emoji-mart/picker";

.form-control {
    margin: 0 0 5px 5px;
    width: calc(100% - 10px);
    background-color: $column-color;
    background-color: $status-editor-background;
    border-color: $status-secondary-color;
    color: $status-editor-color;
    font-size: $default-font-size;

    &:focus {
        box-shadow: none;
    }

    &--privacy {
        display: inline-block;
        width: calc(100% - 15px - #{$btn-send-status-width} - #{$counter-width});
    }
}

.status-editor {
    position: relative;
    font-size: $default-font-size;
    margin-bottom: 5px;

    &__title {
        background-color: $status-editor-title-background;
        color: $status-editor-color;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-width: 0;
        margin-bottom: 0;
    }

    &__emoji {
        position: absolute;
        top: 37px;
        right: 10px;

        &--image {
            transition: all .2s;

            width: 24px;
            height: 24px;

            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: gray;
            opacity: .7;

            &:hover {
                filter: none;
                -webkit-filter: grayscale(0%);
                -moz-filter: grayscale(0%);
                -ms-filter: grayscale(0%);
                -o-filter: grayscale(0%);
                opacity: 1;
            }
        }
    }

    &__lang {
        position: absolute;
        top: 64px;
        right: 12px;

        font-weight: bolder;
        font-size: 12px;
        color: #a5a5a5;
        text-decoration: none;

        display: block;
        width: 20px;
        height: 19px;
        border-radius: 2px;
        background-color: rgba(255, 255, 255, 0);

        padding: 1px 0 0 2px;
        text-transform: uppercase;

        &:hover {
            text-decoration: none;
            color:black;
            background-color: #e6e6e6;
        }
    }

    &__content {
        border-width: 0;
        background-color: $status-editor-background;
        color: $status-editor-color;
        margin-bottom: 0;

        resize: none;
        border: none;
        overflow: auto;
        outline: none;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        min-height: 110px;
        height: 110px;

        padding-bottom: 10px;
        padding-right: 30px;
        //border-bottom: 1px solid black;

        &::-webkit-resizer {
            width: 0px;
            height: 0px;
        }

        &::-webkit-scrollbar {
            width: 0px;
        }
    }

    &__mention-error {
        background-color: $status-editor-background;
        color: rgb(255, 34, 34);
        padding: 5px 10px;
        margin: 0 5px;
    }

    &__autosuggest {
        display: block;
        margin: 0 5px;
    }

    &__footer {
        height: 34px;
        margin: 0 5px;
        border-width: 0;

        background-color: $status-editor-footer-background;

        &--link {
            color: $status-editor-footer-link-color;
            display: inline-block;
            padding: 5px;
            margin: 2px 0 0 5px;
        }

        &--add-poll {
            font-size: 16px;
            margin: 0 0 0 5px;
            position: relative;
            top: 0px;
        }

        &--send-button {
            @include clearButton;
            transition: all .2s;
            float: right;
            padding: 0 15px 0 15px;
            height: 34px;
            background-color: $status-editor-footer-background;

            &:hover {
                background-color: lighten($status-editor-footer-background, 20%);
                background-color: darken($status-editor-footer-background, 20%);
            }

            outline: inherit;
            &:focus {
                background-color: darken($status-editor-footer-background, 20%);
            }

            & span {
                position: relative;
                top: 1px;

                margin: 0;
                padding: 0;
            }
        }

        &__counter {
            float: right;
            height: 34px;
            padding: 6px 7px 0 7px;
            vertical-align: center;

            &--count {
                display: block;
                margin-right: 40px
            }

            &--posts {
                display: block;
                float: right;
            }
        }
    }
}

.btn-custom-primary {
    display: inline-block;
    width: $btn-send-status-width;
    position: relative;
    top: -1px;
    left: 5px;
    font-weight: 500;
}

.context-menu-icon {
    position: relative;
    left: -3px;
    font-size: 12px;
    color: #1f1f1f;
}

.emojipicker {
    font-size: $default-font-size !important;
}

.scheduler {
    display: block;
    margin: 0 5px; 
    border-bottom: 1px solid whitesmoke;
}

.language-warning {
    padding: 5px 10px;
    color: orange;

    &__link {
        text-decoration: underline;
        color: #f0d124;

        &:hover {
            color: #d18800;
        }
    }
}

@import '~@angular/cdk/overlay-prebuilt.css';
// ::ng-deep .cdk-overlay-backdrop  {
//     // width: 100%;
//     // height: 100%;
//     border: 3px solid greenyellow;
//     background-color: black;
//     min-height: 20px;
// }