@use 'funciones.scss' as *;
@use 'inputs.scss';
@use 'buttons.scss';

//? Medidas
html {
    font-size: 62.5%;
    overflow-x: hidden;
    &.overflow-hidden {
        overflow: hidden;
    }
    body {
        font: 14px '';
    }

    @media (min-width: 1921px) and (max-height: 600px) {
        font-size: 55.5%;
    }

    a {
        text-decoration: none;
    }
}
h1,
h2,
h3,
h4,
h5,
h6 {
    all: unset; // borra **todos** los estilos, incluyendo heredados
    display: revert; // para que sigan comportándose como encabezados (bloques)
}
.fancybox__container {
    background-color: rgb(0 0 0 / 51%) !important;
}
//? Fonts
body,
section {
}

section[class*='mdl'] {
    padding-left: 10rem;
    padding-right: 10rem;
    box-sizing: border-box;

    @media #{$desktopSmall} {
        padding-left: 9rem;
        padding-right: 9rem;
    }

    @media #{$desktopSmall2} {
        padding-left: 8rem;
        padding-right: 8rem;
    }

    @media #{$tabletH} {
        padding-left: 9.5rem;
        padding-right: 9.5rem;
    }

    @media #{$tabletV} {
        padding-left: 7.7rem;
        padding-right: 7.7rem;
    }

    @media #{$mobile} {
        padding-left: 4.1rem;
        padding-right: 4.1rem;
    }

    @media #{$mobileSmall} {
        padding-left: 2.7rem;
        padding-right: 2.7rem;
    }
}

section .mdl-container {
    width: 100%;
    max-width: 160rem;
    margin: 0 auto;
}

//? Generic classes
.readmoreinit {
    overflow: hidden;
}
.readmoreinit {
    line-height: 1.6 !important;

    @media screen and (max-width: 1200px) {
        line-height: 1.6 !important;
    }
    @media screen and (max-width: 600px) {
        line-height: 1.6 !important;
    }
}
.read-more {
    display: flex;
    flex-direction: column;
    font-family: $font;
    font-size: 1.5rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: normal;
    color: #e6411e;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 2rem;
    .less {
        display: none;
    }
}

.w100 {
    font-weight: 100;
}
.w300 {
    font-weight: 300;
}
.w400 {
    font-weight: normal;
}
.w500 {
    font-weight: medium;
}
.w600 {
    font-weight: 600;
}
.w700 {
    font-weight: bold;
}
.w900 {
    font-weight: 900;
}
.italic {
    font-style: italic;
}

.row {
    display: flex;
    flex-direction: row;
}

.col {
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

html {
    overflow-x: hidden;
}
body {
    cursor: default;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* {
    color: inherit;
    border: 0;
    margin: 0;
    padding: 0;
}
a {
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-decoration: none;
    cursor: pointer;
}
ul {
    list-style-position: outside;
}
li {
    padding-left: 3rem;
    list-style: none;
    position: relative;
    &:before {
        content: '●';
        // color: #000084;
        position: absolute;
        top: 0;
        left: 0;
    }
}
button,
mark {
    background: none;
}
button,
label {
    cursor: pointer;
}
:focus {
    outline: none !important;
}
::-moz-focus-inner {
    border: 0;
}
summary::-webkit-details-marker {
    display: none;
}
button,
input[type='submit'],
input[type='text'] {
    -webkit-appearance: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: none;
}
p {
    width: 100%;
}
img {
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ----------------------------------------------------------------------------------------------------------------------- */

//? Animations
// SWING vertical
@-webkit-keyframes swingV {
    15% {
        -webkit-transform: translateY(0.5rem);
        transform: translateY(0.5rem);
    }
    30% {
        -webkit-transform: translateY(-0.5rem);
        transform: translateY(-0.5rem);
    }
    50% {
        -webkit-transform: translateY(0.3rem);
        transform: translateY(0.3rem);
    }
    65% {
        -webkit-transform: translateY(-0.3rem);
        transform: translateY(-0.3rem);
    }
    80% {
        -webkit-transform: translateY(0.2rem);
        transform: translateY(0.2rem);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes swingV {
    15% {
        -webkit-transform: translateY(0.5rem);
        transform: translateY(0.5rem);
    }
    30% {
        -webkit-transform: translateY(-0.5rem);
        transform: translateY(-0.5rem);
    }
    50% {
        -webkit-transform: translateY(0.3rem);
        transform: translateY(0.3rem);
    }
    65% {
        -webkit-transform: translateY(-0.3rem);
        transform: translateY(-0.3rem);
    }
    80% {
        -webkit-transform: translateY(0.2rem);
        transform: translateY(0.2rem);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

// SWING horitzontal
@-webkit-keyframes swingH {
    15% {
        -webkit-transform: translateX(0.5rem);
        transform: translateX(0.5rem);
    }
    30% {
        -webkit-transform: translateX(-0.5rem);
        transform: translateX(-0.5rem);
    }
    50% {
        -webkit-transform: translateX(0.3rem);
        transform: translateX(0.3rem);
    }
    65% {
        -webkit-transform: translateX(-0.3rem);
        transform: translateX(-0.3rem);
    }
    80% {
        -webkit-transform: translateX(0.2rem);
        transform: translateX(0.2rem);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swingH {
    15% {
        -webkit-transform: translateX(0.5rem);
        transform: translateX(0.5rem);
    }
    30% {
        -webkit-transform: translateX(-0.5rem);
        transform: translateX(-0.5rem);
    }
    50% {
        -webkit-transform: translateX(0.3rem);
        transform: translateX(0.3rem);
    }
    65% {
        -webkit-transform: translateX(-0.3rem);
        transform: translateX(-0.3rem);
    }
    80% {
        -webkit-transform: translateX(0.2rem);
        transform: translateX(0.2rem);
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/* Fancybox overrides */

.fancybox__container {
    background-color: white;

    .fancybox__slide {
        flex-direction: column-reverse;
    }

    .fancybox__backdrop,
    .fancybox__counter {
        display: none;
    }

    .fancybox__caption {
        color: $greysoft;
        text-align: center;
        font-family: $font;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 3.9rem;
        padding: 0rem 0 2rem 0;
        @media #{$mobile} {
            font-size: 1.5rem;
        }
        @media #{$mobileSmall} {
            font-size: 1.3rem;
        }
    }

    .fancybox__thumbs {
        display: none;
    }

    .fancybox__nav .carousel__button {
        background-color: $red;
        top: 55%;
        svg {
            stroke: white;
            stroke-width: 0.3rem;
        }
    }

    .carousel__button.is-close {
        svg {
            display: none;
        }
        /* background: url('../../../assets/babylon/svg/icons/closeRed.svg')
            no-repeat center; */
        background-size: 100%;
        width: 4.2rem;
        height: 4.2rem;
        top: -4.7rem;
        right: -5rem;
        transition: transform 0.3s ease;
        transform: rotate(0);
        &:hover {
            transition: transform 0.3s ease;
            transform: rotate(180deg);
        }

        @media #{$mobile} {
            width: 3rem;
            height: 3rem;
        }
    }

    .fancybox__toolbar {
        border-bottom: none;
        margin: 0 0 0 auto;
        padding: 1rem;
        .fancybox__toolbar__items {
            button:not(.fancybox__button--close) {
                display: none;
            }
            .fancybox__button--close {
                background-color: $red;
                svg {
                    width: 40%;
                    path {
                        stroke: white;
                        stroke-width: 0.3rem;
                    }
                }
            }
        }
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
