<script>
    import RepeatedSkills from "./RepeatedSkills.svelte";

    export let Style = "";
</script>

<div class="container" style="{Style}">
    <div>
        <RepeatedSkills textOverride={["Hello", "你好", "Hej"]} targetTextHeight={4} targetTextWidth={50} applyRotation={false}/>
    </div>
    <div/>
</div>

<style lang="scss">
    .container {
        position: absolute;
        transform: translate(-25mm, 0mm) rotate(-45deg);
        display: grid;
        justify-self: start;
        vertical-align: top;
        align-self: flex-start;

        z-index: 0;

        > div:nth-child(1) {
            //background-color: #2f559622;
            width: 100mm;
            height: 17.5mm;
            padding-bottom: 1mm;

            // Text inside
            display: grid;
            place-content: center;
            border-bottom: #4472c4 dotted 0.5mm;

            &:first-child {
                color: #4472c4;                
                font-size: 3mm;
                //font-weight: bold;
            }
        }
        
        > div:nth-child(2) {
            padding-top: 4mm;
            //border-bottom: #4472c4 dashed 2mm;

            background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
            background-position: bottom;
            background-size: 6mm 1.5mm;
            background-repeat: repeat-x;
        }
    }
</style>