.rsuite-Picker {
    /* settings */
    @container-bg: #FFF;
    @container-fg: #333;
    @container-border: 1px solid #CCC;
    @container-padding-vertical: 7px;
    @container-padding-right: 26px;
    @container-padding-left: 18px;
    @arrow-color: #575757;
    @arrow-right-spacing: 17px;
    @arrow-top-spacing: 14px;
    @arrow-size: 4px;
    @dropdown-bg: @container-bg;
    @option-select-bg: @H500;
    @option-hover-bg: @H050;
    @option-spacing: 2px;
    @expand-border-color: #DCDCDC;

    position: relative;
    box-sizing: border-box;
    text-align: left;

    &.cascade {
        .cascade();
    }
    &.disabled {
        .toggle {
            background: #F5F5F5 !important;
            cursor: not-allowed;
        }
        opacity: .65;
    }

    &:not(.disabled) .toggle {
        .button-ripple('background-color .3s linear, border .0s linear');
    }

    .toggle {
        position: relative;
        overflow: hidden;
        background-color: @container-bg;
        color: @container-fg;
        border: @container-border;
        padding: @container-padding-vertical @container-padding-right @container-padding-vertical @container-padding-left;
        cursor: pointer;
        outline: none;
        width: 100%;
        text-align: left;

        &-placeholder {
            white-space: nowrap;
            margin-right: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 22px;
        }

        .toggle-arrow {
            content: '';
            display: block;
            position: absolute;
            right: @arrow-right-spacing;
            top: @arrow-top-spacing;
            border-color: @arrow-color transparent transparent;
            border-width: @arrow-size @arrow-size 0;
            border-style: solid;
        }

    }

    &.expand {
        .expand();
    }

    &.inverse {
        .toggle {
            border-color: @B050;
            background-color: @B050;

            &:hover {
                background-color: #E8E8E8;
            }

            &-placeholder {
                color: @B900;
            }
        }
    }

    .selectList, .checkList {
        overflow: auto;
        .clearfix;
    }

    .selectDropdown {
        .box-shadow();
        background-color: @container-bg;
        border: @container-border;
        padding: 0px;
        margin-top: -1px;
        position: absolute;
        top: 100%;
        z-index: 100;
        left: 0;
        width: 100%;
        animation: slideUpIn .3s cubic-bezier(0.23, 1, 0.32, 1) both;

        &.dropup {
            top: auto;
            left: 0;
            bottom: 37px;
            border-top: @container-border;
            .box-shadow(0, -6px, 12px, rgba(0, 0, 0, .175));
            animation: slideDownIn .3s cubic-bezier(0.23, 1, 0.32, 1) both;
        }
        .tree-node {
            position: relative;
            &.open {
                > .node-children {
                    display: block;
                }
                > .node-hasChildren .expand-icon:before {
                    content: "\f0d7";
                }
            }
            .node-children {
                display: none;
            }

            .selectOption {
                padding: 6px;
            }
            .expand-icon {
                width: 18px;
                height: 18px;
                text-align: center;
                cursor: pointer;
                position: absolute;
                margin-left: -20px;
                top: 8px;
                &:before {
                    content: "\f0da";
                }
            }
        }

        .selectList .tree-node .item.active {
            background: @H500;
            .expand-icon {
                color: #fff;
            }
        }

    }

    .searchBar {
        padding: 6px 10px;
    }
    .searchBar-input {
        display: block;
        padding: 4px;
        border: @container-border;
        box-sizing: border-box;
        width: 100%;
        outline: none;
    }

    .selectOption {
        padding: 6px 10px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        text-decoration: none;
        .item-transition;

        label {
          .ellipsis-basic();
        }

        &.disabled {
            color: #8F8F8F;
            &:hover, &:focus {
                color: #8F8F8F;
                background: none;
            }
        }

        &:hover, &:focus, &.hover {
            background-color: @option-hover-bg;
            color: #575757;
        }
        &.active {
            background-color: @option-select-bg;
            color: #FFF;
        }

    }

    .selectGroup {
        margin-top: @option-spacing;
        border-bottom: 1px solid #F5F5F5;
        .selectGroup-title {
            position: relative;
            font-weight: bold;
            color: #000;
            padding: 8px 10px 6px;
            .arrow {
                content: '';
                display: block;
                position: absolute;
                right: @arrow-right-spacing;
                top: @arrow-top-spacing;
                border-color: @arrow-color transparent transparent;
                border-width: @arrow-size @arrow-size 0;
                border-style: solid;
            }
        }
        &.shrink .arrow {
            border-color: transparent @arrow-color transparent transparent;
            border-width: @arrow-size;
        }
        &.shrink .selectOption {
            display: none
        }
    }

    &.TreePicker {
        .item:hover {
            background: @option-hover-bg;
        }
        .selectDropdown {
            width: auto;
            min-width: 100%;
        }
        .checkList, .selectList {
            min-width: 100%;
        }
        &.onlyOneLayer {
            .checkList, .selectList {
                > .selectOption {
                    margin-left: -12px;
                }
            }
        }
    }

    .expand() {
        .toggle {
            z-index: 101;
            background: @container-bg !important;
            border-color: @expand-border-color !important;
            border-bottom-width: 0;
            padding: @container-padding-vertical @container-padding-right (@container-padding-vertical + 1) @container-padding-left;
        }

        &.rsuite-Picker--dropup {
            .toggle {
                border-top-width: 0;
                border-bottom-width: 1px;
                padding: (@container-padding-vertical + 1) @container-padding-right @container-padding-vertical @container-padding-left;
            }

            .toggle-arrow {
                top: (@arrow-top-spacing + 1);
            }
        }
    }

    .cascade() {
        @cascade-height: 200px;
        .checkList,.selectList{
            overflow: hidden;
        }

        &.expand .toggle {
            padding: @container-padding-vertical @container-padding-right @container-padding-vertical @container-padding-left;
        }

        &.expand.rsuite-Picker--dropup {
            .toggle {
                border-top-width: 1px;
                padding: @container-padding-vertical @container-padding-right @container-padding-vertical @container-padding-left;

                .toggle-arrow {
                    top: @arrow-top-spacing;
                }
            }

            .selectDropdown.dropup {
                border-top: medium none;
            }
        }


        .selectDropdown {
            border: medium none;
            width: auto;
            min-width: auto;
            height: @cascade-height;
        }

        .toggle {
            border-bottom-width: 1px !important;
        }

        .cascader-menu {
            width: 120px;
            display: inline-block;
            height: @cascade-height;
            overflow-y: auto;
            border-top: 1px solid @expand-border-color;
            border-bottom: 1px solid @expand-border-color;
            border-right: 1px solid @expand-border-color;
            animation: slideLeftIn 0.3s cubic-bezier(0.23, 1, 0.32, 1) both;

            &:first-child {
                border-left: 1px solid @expand-border-color;
            }

            &:last-child {
                border-right-color: @expand-border-color;
            }
        }

        .toggle-placeholder{
          .ellipsis-basic();
          .label-path{
            margin-left: 2px;
            &:after {
                content: ">";
                margin: 0 6px;
            }
            &:last-child{
              &:after{
                content:''
              }
            }
          }
        }

        .has-children {
            position: relative;
            .more-arrow {
                content: '';
                display: block;
                position: absolute;
                right: 6px;
                top: @arrow-top-spacing;
                border-color: transparent transparent transparent @arrow-color;
                border-width: @arrow-size;
                border-style: solid;
            }
        }
    }
}