@import url("main.css");

/*
    ARROW.CSS

    Description: This css file is used for make a arrow
    with a clip-path. Also this file includes all its
    properties like size, background color and others.
*/

.arrow,
.arrow__container {
    width: 40px;
    height: 40px;
}

.arrow {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 65%, 25% 50%, 0% 35%);
}

.arrow__container,
.arrow__container--small {
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow__container--small {
    width: 30px;
    height: 30px;
}

.arrow__corner {
    top: 17.5% !important;
    left: 10% !important;
}

.arrow__border {
    position: absolute;
    clip-path: polygon(-5% -5%, 105% 50%, -5% 105%, -5% 65%, 25% 50%, -5% 35%);
    background-color: white;
    width: 44px;
    height: 44px;
    top: -2px;
    left: -2px;
}

.arrow--rotate {
    transform: rotate(180deg);
}

/*
    Section: Colors

    Description: Colors and position modifiers
    for the arrow component.
*/

.absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.yellow {
    background-color: var(--color-yellow);
}

.orange {
    background-color: var(--color-primary);
}

.green {
    background-color: var(--color-secondary);
}

.black {
    background-color: #000;
}

.transparent {
    background-color: transparent;
}

/*
    Section: Responsive

    Description: Media queries that change styles from
    the arrow component.
*/

@media (max-width: 640px) {
    .arrow {
        width: 30px;
        height: 30px;
    }

    .arrow__border {
        width: 34px;
        height: 34px;
    }

    .arrow--rotate {
        transform: translate(0, -25%) rotate(180deg);
    }
}

@media (max-width: 1200px) {
    .arrow {
        width: 32.5px;
        height: 32.5px;
    }
}

@media (max-width: 1000px), (max-height: 530px) {
    .arrow {
        width: 30px;
        height: 30px;
    }

    .arrow__corner {
        top: 20% !important;
        left: 10% !important;
    }
}

@media (max-width: 400px), (max-height: 300px) {
    .arrow {
        width: 20px;
        height: 20px;
    }

    .arrow__border {
        width: 24px;
        height: 24px;
    }

    .arrow--rotate {
        transform: translate(0, -50%) rotate(180deg);
    }
}

@media (max-height: 680px) {
    .arrow {
        width: 28px;
        height: 28px;
    }

    .arrow__border {
        width: 32px;
        height: 32px;
    }

    .arrow--rotate {
        transform: translate(0, -30%) rotate(180deg);
    }
}