Sengi-Windows-MacOS-Linux/src/app/components/floating-column/search/search.component.scss

@import "variables";
@import "mixins";
@import "panel";
@import "commons";
@import "buttons";

.panel {
    padding-left: 0px;
    padding-right: 0px;
}

.form-section {
    overflow: auto;
    width: 100%;
    padding-left: 5px;
}

.form-with-button {
    width: calc(100% - #{$button-size});
    float: left;

    // background-color: $column-color;
    // border-color: $button-border-color;
    // color: #fff;
    // color: rgb(255, 0, 0);    

    &:focus {
        box-shadow: none;
    }

    font-size: $default-font-size;
    height: 29px;
    padding: 0 5px 0 5px;    

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

.form-button {
    @include clearButton;
    transition: all .2s;
    background-color: $status-editor-footer-background;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;

    &: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%);
    }

    width: $button-size;
    height: 29px;

    // border: none;
    // outline: none;
    // cursor: pointer;
    // background-color: $button-background-color;
    // color: $button-color;
    // color: whitesmoke;
    // transition: all .2s;

    // &:hover {
    //     background-color: $button-background-color-hover;
    //     color: $button-color-hover;
    // }


    // border: 1px solid $button-border-color;
    // border-width: 1px 1px 1px 0;
}

$search-form-height: 70px;

.search-result-form {
    height: $search-form-height;
    //padding-left: 10px;
    padding-right: 10px;
    //border-bottom: 1px solid #222736;
}

.search-result-display {
    overflow: auto;
    height: calc(100% - #{$search-form-height});
}

.search-results {
    // outline: 1px solid greenyellow;
    margin-top: 10px; // &:first-of-type{
    padding-left: 10px; //     margin-top: 10px;
    //padding-right: 10px; //     margin-top: 10px;

    // }
    &__title {
        text-transform: uppercase;
        font-size: 13px;
    }

    &__hashtag {
        border-radius: 2px;
        display: block;
        padding: 5px;
        color: white;
        text-decoration: none;
        transition: all .3s;

        &:hover {
            background-color: $button-background-color-hover;
        }

        border-top: 1px solid $separator-color;

        &:last-of-type {
            border-bottom: 1px solid $separator-color;
        }
    }

    &__status {
        font-size: 15px;
        border-top: 1px solid $separator-color;

        &:last-of-type {
            border-bottom: 1px solid $separator-color;
        }
    }
}

.account {
    display: block;
}