@use "sass:color";
@use "config" as *;

.fi {
    width: $fi_width;
    height: $fi_height;
    padding: $fi_arrow 0 0;
    position: relative;
    margin: 0 auto;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    box-sizing: border-box;
    font-family: sans-serif;
    text-decoration: none;
    display: block;

    &::before,
    &::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }

    &::before {
        top: 0;
        height: 100%;
        left: 0;
        background-color: $fi_color;
        right: $fi_arrow;
    }

    &::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: $fi_arrow 0 0 $fi_arrow;
        border-color: transparent transparent transparent color.adjust($fi_color, $lightness: 20%);
        top: 0;
        right: 0;
    }

    &:hover:not(.fi-no-hover) {
        transform: translate(0, -5px);
    }

    &-content {
        background-color: $fi_color;
        inset: $fi_arrow 0 0 0;
        color: $fi_text_color;
        padding: #{$fi_height - $fi_font_size * $fi_lh - $fi_arrow} 0.3em 0;
        font-size: $fi_font_size;
        font-weight: 500;
        position: absolute;
    }
}