/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/

.button {
    text-transform: uppercase;
    text-decoration: none;
    outline: 0;
    border: 0;
    background: transparent;
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 0;
    border-radius: 999px;
    font-size: 0.9rem;
    overflow: hidden;
}

.button:focus,
.button:hover {
    text-decoration: none;
    outline: 0;
}

.button span {
    display: block;
    position: relative;
}

.button:not(.no-transition):not(.link) {
    transition: background 300ms, color 300ms;
}


/*--------------------------------------------------------------
# Button variants
--------------------------------------------------------------*/

.button.bg-white {
    background: #FFFFFF;
}
.button.bg-black {
    background: #000;
}

.button.bg-silver {
    background: var(--silver);
}

.button.bg-blue {
    background: var(--blue);
}
.button.bg-red {
    background: var(--red);
}


.button.outline-white {
    border: 1px solid #FFFFFF;
}
.button.outline-black {
    border: 1px solid #000;
    position: relative;
}

.button.has-shadow {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}


.button.text-white {
    color: #FFFFFF;
}
.button.text-black {
    color: #000;
}
.button.text-red {
    color: var(--red);
}

.button.text-normal {
    text-transform: lowercase;
}

.button.rounded-medium {
    border-radius: 0.75rem;
}



.button.hover-text-red:hover {
    color: var(--red);
}



/*--------------------------------------------------------------
# Global button hover effect
--------------------------------------------------------------*/

.button.effect:not(:hover)::before {
    transform: skewX(35deg) translateX(-100%);
}
body.ready .button.effect::before, body.ready .button.effect::after {
    transition: 0.3s;
}
.button.effect::before, .button.effect::after {
    content: ' ';
    display: inline-block;
    position: absolute;
    bottom: -1px;
    top: -1px;
    left: 0;
    right: -40px;
    min-height: 48px;
    transform: skewX(35deg);
    transform-origin: 100% 100%;
}
.button.effect:before {
    background-color: var(--red);
}


/*--------------------------------------------------------------
# Button hover effect variations
--------------------------------------------------------------*/

/* Red section (when scrolling) */

body.contrast-red .button.bg-silver:hover {
    background: #000;
}
body.contrast-red .button.effect-on-red:hover {
    background: #FFFFFF;
    color: #000;
}
body.contrast-red .button.effect.effect-on-red:before {
    background: #FFFFFF;
}
body.contrast-red .button.effect:before {
    background: #000;
}


/* Button in a red section (when static) */

.button.effect-on-red:hover {
    background: #000;
    color: #FFFFFF;
}
.button.effect-on-red:before {
    background: #000;
}


/* Button red bg */

.button.bg-red.effect:before {
    background: #000;
}


/* Button combination hovers */

.button.bg-silver:hover,
.button.bg-white:hover,
.button.outline-black:hover {
    background: var(--red);
    color: #FFFFFF;
}


/* Button outline */

.button.outline-white:hover {
    background: #FFFFFF;
    color: #000;
}
.button.outline-white.effect:before {
    background: #FFFFFF;
}



/* Button hover with icon */

.button.has-icon:hover svg {
    fill: #FFFFFF;
}


/* Button link */

.button.link {
    border-radius: 0;
    color: #000;
}


/* Button specific hover for jobs overview page  */

body.page-jobs-overview:not(.sidebar-open) .header-wrapper .button.effect:hover {
    background: #000;
    color: #FFFFFF;
}
body.page-jobs-overview:not(.sidebar-open) .header-wrapper .button.effect:before {
    background: #000;
}
body.page-jobs-overview:not(.sidebar-open).scrolled-semi .header-wrapper .button.effect:hover {
    color: #FFFFFF;
}
body.page-jobs-overview:not(.sidebar-open).scrolled-semi .header-wrapper .button.effect:before {
    background: var(--red);
}


/*  Toggle job filter button */

.button.toggle-filter-btn,
.button.small.toggle-filter-btn {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 750;
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    padding: 0.65rem;
    background: var(--red);
}
.button.toggle-filter-btn.small span {
    display: flex;
    padding: 0;
}
.button.toggle-filter-btn svg {
    width: 100%;
    height: 100%;
    fill: #FFFFFF;
}


/*  Button with icon */

.button.has-icon {
    display: flex;
    align-items: center;
    position: relative;
}
.button.has-icon svg,
.button.has-icon img {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
}

.button.small.has-icon span {
    padding: 0 0 0 2.15rem;
}
.button.small.has-icon {
    padding: 0.65rem 1.25rem;
}

.button.medium.more-horizontal.has-icon {
    padding-left: 1.25rem;
}


/*--------------------------------------------------------------
# Button utility classes
--------------------------------------------------------------*/

.button.spacing {
    margin: 3rem 0;
}

.button.top {
    margin-top: 1rem;
}

.button.offset-top {
    top: 1.5rem;
}
.button.offset-top-large {
    top: 3rem;
}

.button.left {
    margin-left: auto;
}


/*--------------------------------------------------------------
# Button sizes
--------------------------------------------------------------*/


.button.small span {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
}
.button.medium span {
    padding: 1rem 2.25rem;
}
.button.large span {
    padding: 1.35rem 2.5rem;
}

.button.small.more-horizontal span {
    padding: 0.65rem 2rem 0.65rem 2rem;
}
.button.medium.more-horizontal span {
    padding: 0.8rem 2rem 0.765rem 2.5rem;
}






/*.button.small.more-horizontal span {*/
/*    padding: 0.65rem 2rem!important;*/
/*}*/
/*.button.medium.more-horizontal span {*/
/*    padding: 0.75rem 2.5rem!important;*/
/*}*/






/*--------------------------------------------------------------
# Media querys
--------------------------------------------------------------*/

@media all and (max-width: 992px) {

    .button.toggle-filter-btn,
    .button.small.toggle-filter-btn {
        display: flex;
    }

}

@media all and (max-width: 575px) {

    .button.spacing {
        margin: 1.5rem 0;
    }

    .button.offset-top-large {
        top: 1.5rem;
    }

}