//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .page-header {
        .header.content {
            .block-search {
                z-index: 999;
                margin-top: 0;
                .label {
                    width: 70px;
                    text-align: center;
                    &::before {
                        background-image: url('../images/header/search.svg');
                        background-position: center;
                        background-repeat: no-repeat;
                        content: '';
                        cursor: pointer;
                        display: block;
                        height: 20px;
                        left: 20px;
                        position: relative;
                        width: 20px;
                    }
                }
                .control {
                    margin: 0;
                }
                .input-text {
                    .lib-font-size(17);
                    border-color: @djo-header-border-color;
                    border-radius: 30px;
                    color: @djo-gray;
                    height: 40px;
                    padding-left: 20px;
                    &::-webkit-input-placeholder {
                        color: @djo-gray;
                    }
                    &::-moz-placeholder {
                        color: @djo-gray;
                    }
                    &:-ms-input-placeholder {
                        color: @djo-gray;
                    }
                }
                .action.search::before {
                    background-image: url('../images/header/search.svg');
                    background-position: center center;
                    background-repeat: no-repeat;
                    content: "";
                    display: block;
                    height: 20px;
                    position: relative;
                    right: -5px;
                    width: 20px;
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .page-header {
        .header.content {
            .block-search {
                .label {
                    width: 60px !important;
                    padding: 21px 0;
                }
                .control {
                    border-top-color: @djo-header-border-color;
                    padding-left: 30px;
                    padding-right: 30px;
                }
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .page-header {
        .block-search {
            .label {
                padding: 21px 0;
            }
            .control {
                border-top-color: @djo-header-border-color;
                padding-left: 30px;
                padding-right: 30px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-header {
        .header.content {
            .block-search {
                padding: 0;
                position: static;
                width: 100%;
                float: none;
                .label {
                    height: 26px;
                    margin: 0;
                    padding: 35px 0 0;
                    position: static;
                    width: 70px;
                    &.active {
                        + .control {
                            .input-text {
                                position: static;
                            }
                        }
                    }
                    &::before {
                        top: 5px;
                    }
                }
                .control {
                    // border-top: 1px solid @djo-header-border-color;
                    left: auto;
                    padding-left: 30px;
                    padding-right: 30px;
                    position: relative;
                    .input-text {
                        margin-top: 15px;
                        margin-bottom: 15px;
                        position: absolute;
                        left: -300%;
                    }
                }
                .actions {
                    .action.search {
                        display: none;
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__1240) {
    .page-header {
        .header.content {
            .block-search {
                float: unset;
                margin-right: 30px;
                padding: 26px 0;
                width: 170px;
                .label {
                    display: none;
                }
                .control {
                    border-top: none;
                    padding-left: 2px;
                    padding-right: 2px;
                    .input-text {
                        position: static;
                        margin-top: 0;
                        margin-bottom: 0;
                    }
                }
                .actions {
                    position: relative;
                    .action.search {
                        cursor: default;
                        display: inline-block;
                        height: 30px;
                        margin: 0;
                        opacity: 1;
                        top: -35px;
                        width: 30px;
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .page-header {
        .header.content {
            .block-search {
                width: 200px;
            }
        }
    }
}