@use "config" as *;

// Document Icon
$file_icon_width: 36px;
$file_icon_height: 46px;
$file_icon_arrow: 10px;
$file_icon_color: #007bff;
$file_icon_text_color: #fff;
$file_icon_font_size: 13px;
$file_icon_lh: 1.5;

.file-icon {
    width: $file_icon_width;
    height: $file_icon_height;
    padding: $file_icon_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;

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

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

    &::after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: $file_icon_arrow 0 0 $file_icon_arrow;
        border-color: transparent transparent transparent lighten-color($file_icon_color, 20%);
        top: 0;
        right: 0;
    }

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

    &-content {
        background-color: $file_icon_color;
        inset: $file_icon_arrow 0 0 0;
        color: $file_icon_text_color;
        padding: #{$file_icon_height - $file_icon_font_size * $file_icon_lh -
            $file_icon_arrow} 0.3em 0;
        font-size: $file_icon_font_size;
        font-weight: 500;
        position: absolute;
    }
}

@mixin file-icon-color($class, $color) {
    .extension-#{$class} {
        &.file-icon {
            &::before {
                background-color: $color;
            }

            &::after {
                border-left-color: lighten-color($color, 20%);
            }

            .file-icon-content {
                background-color: $color;
            }
        }
    }
}

@mixin file-icon-size($class, $width, $height, $arrow_h, $font_size) {
    .size-#{$class} {
        &.file-icon {
            width: $width;
            height: $height;
            padding-top: $arrow_h;

            &::before {
                right: $arrow_h;
            }

            &::after {
                border-top-width: $arrow_h;
                border-left-width: $arrow_h;
            }

            .file-icon-content {
                top: $arrow_h;
                padding-top: #{$height - $font_size * $file_icon_lh - $arrow_h};
                font-size: $font_size;
            }
        }
    }
}

@include file-icon-color("doc", #2c3e50);
@include file-icon-color("docx", #2980b9);
@include file-icon-color("wpd", #e67e22);
@include file-icon-color("html", #e34c26);
@include file-icon-size("md", 36px * 2, 46px * 2, 10px * 2, 13px * 2);