@import "../ui.vars.less";

.sc-list-item-selector {
    width: 100%;

    & .active {
        border-radius: none;
        background-color: transparent;
    }

    [max-width-300] {
        max-width: 300px;
    }

    #searchable-list {
        sc-selectable-list {
            @media not screen and (max-width: @mobile) {
                max-height: 400px !important;
            }
        }

        #search-input {
          @media not screen and (max-width: @mobile) {
            padding: 8px;
          }
        }
    }

    #pop-out-container {
        margin-top: 6px;
        width: 100%;
    }

    @media screen and (max-width: 480px) {
        &[sheet=true]{
            #pop-out-container {
                padding: 0px;
                overflow-y: auto;
                height: 90%;
                margin-top: 0px;
            }
        }
    }

    selector-btn {
        width: 100%;
        font-size: 0.875rem;
        line-height: 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: space-around;
        height: 48px;
        padding: 0 16px;
        border-radius: @buttonRadius;
        background-color: transparent;
        min-width: 150px;
        color: @text-500;
        outline: none !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        border: 1px solid @scInactive;
        & fa-icon {
            color: @appDarkGray !important;
            width: 16px !important;
        }
        & p {
            font-weight: 400 !important;
            width: auto;
        }
        &[selected]:not([disabled]) {
            border: 1px solid @scAction;
            background-color: transparent;
            box-shadow: 0px 0px 0px 3px @scActionBackground;
            & fa-icon {
                color: @appBlack !important;
                width: 16px !important;
            }
        }
        &[disabled] {
          background-color: @scBackground;
          border: 1px solid @appSuperLightGray;
          & fa-icon, p {
            color: @text-300 !important;
          }
        }
        &[validationError] {
            border: 1px solid @scNegative;
        }
    }
}