styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.gg-close-o {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 40px;
}

.gg-close-o::after,
.gg-close-o::before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 5px;
    top: 8px;
    left: 3px;
}

.gg-close-o::after {
    transform: rotate(-45deg);
}

.gg-arrow-right {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
}

.gg-arrow-right::after,
.gg-arrow-right::before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    right: 3px;
}

.gg-arrow-right::after {
    width: 8px;
    height: 8px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    bottom: 7px;
}

.gg-arrow-right::before {
    width: 16px;
    height: 2px;
    bottom: 10px;
    background: currentColor;
}

.gg-copy {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 14px;
    height: 18px;
    border: 2px solid;
    margin-left: -5px;
    margin-top: -4px;
}

.gg-copy::after,
.gg-copy::before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
}

.gg-copy::before {
    background:
        linear-gradient(to left, currentColor 5px, transparent 0) no-repeat
            right top/5px 2px,
        linear-gradient(to left, currentColor 5px, transparent 0) no-repeat left
            bottom/ 2px 5px;
    box-shadow: inset -4px -4px 0 -2px;
    bottom: -6px;
    right: -6px;
    width: 14px;
    height: 18px;
}

.gg-copy::after {
    width: 6px;
    height: 2px;
    background: currentColor;
    left: 2px;
    top: 2px;
    box-shadow:
        0 4px 0,
        0 8px 0;
}

.gg-smile {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 100px;
}

.gg-smile::after,
.gg-smile::before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 4px;
}

.gg-smile::before {
    background: currentColor;
    box-shadow: 6px 0 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    top: 5px;
}

.gg-smile::after {
    width: 8px;
    height: 4px;
    border-radius: 150px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid;
    border-top-color: transparent;
    top: 9px;
}

.gg-play-button-o {
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 22px;
    border: 2px solid;
    border-radius: 20px;
}

.gg-play-button-o::before {
    content: '';
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 0;
    height: 10px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid;
    top: 4px;
    left: 7px;
}

.gg-play-button-o {
    --ggs: 2;
}
.gg-close-o {
    --ggs: 2;
}
.gg-copy {
    --ggs: 1.2;
}
.gg-smile {
    --ggs: 2;
}

.editor {
    line-height: 20px;
    tab-size: 2;
}

.editor-dark {
    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1em;
    }
    code.hljs {
        padding: 3px 5px;
    }
    .hljs {
        color: #e6e6e6;
        background: #2a2c2d;
    }
    .hljs-emphasis {
        font-style: italic;
    }
    .hljs-strong {
        font-weight: 700;
    }
    .hljs-link {
        text-decoration: underline;
    }
    .hljs-comment,
    .hljs-quote {
        color: #bbb;
        font-style: italic;
    }
    .hljs-params {
        color: #bbb;
    }
    .hljs-attr,
    .hljs-punctuation {
        color: #e6e6e6;
    }
    .hljs-meta,
    .hljs-name,
    .hljs-selector-tag {
        color: #ff4b82;
    }
    .hljs-char.escape_,
    .hljs-operator {
        color: #45a9f9;
    }
    .hljs-deletion,
    .hljs-keyword {
        color: #ff75b5;
    }
    .hljs-regexp,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-variable.language_ {
        color: #ff9ac1;
    }
    .hljs-code,
    .hljs-formula,
    .hljs-property,
    .hljs-section,
    .hljs-subst,
    .hljs-title.function_ {
        color: #45a9f9;
    }
    .hljs-addition,
    .hljs-bullet,
    .hljs-meta .hljs-string,
    .hljs-selector-class,
    .hljs-string,
    .hljs-symbol,
    .hljs-title.class_,
    .hljs-title.class_.inherited__ {
        color: #19f9d8;
    }
    .hljs-attribute,
    .hljs-built_in {
        color: #ff4b82;
    }
    ,
    .hljs-doctag,
    .hljs-link,
    .hljs-literal,
    .hljs-meta .hljs-keyword,
    .hljs-number,
    .hljs-punctuation,
    .hljs-selector-id,
    .hljs-tag,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-title,
    .hljs-type,
    .hljs-variable {
        color: #ffb86c;
    }
}

.editor-light {
    pre code.hljs {
        display: block;
        overflow-x: auto;
        padding: 1em;
    }
    code.hljs {
        padding: 3px 5px;
    }
    .hljs {
        color: #2a2c2d;
        background: #e6e6e6;
    }
    .hljs-emphasis {
        font-style: italic;
    }
    .hljs-strong {
        font-weight: 700;
    }
    .hljs-link {
        text-decoration: underline;
    }
    .hljs-comment,
    .hljs-quote {
        color: #676b79;
        font-style: italic;
    }
    .hljs-params {
        color: #676b79;
    }
    .hljs-attr,
    .hljs-punctuation {
        color: #2a2c2d;
    }
    .hljs-char.escape_,
    .hljs-meta,
    .hljs-name,
    .hljs-operator {
        color: #3787c7;
    }
    ,
    .hljs-selector-tag {
        color: #c56200;
    }
    .hljs-deletion,
    .hljs-keyword {
        color: #d92792;
    }
    .hljs-regexp,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-variable.language_ {
        color: #cc5e91;
    }
    .hljs-code,
    .hljs-formula,
    .hljs-property,
    .hljs-section,
    .hljs-subst,
    .hljs-title.function_ {
        color: #3787c7;
    }
    .hljs-addition,
    .hljs-bullet,
    .hljs-meta .hljs-string,
    .hljs-selector-class,
    .hljs-string,
    .hljs-symbol,
    .hljs-title.class_,
    .hljs-title.class_.inherited__ {
        color: #0d7d6c;
    }
    .hljs-attribute,
    .hljs-built_in {
        color: #d92792;
    }
    ,
    .hljs-doctag,
    .hljs-link,
    .hljs-literal,
    .hljs-meta .hljs-keyword,
    .hljs-number,
    .hljs-selector-id,
    .hljs-tag,
    .hljs-template-tag,
    .hljs-template-variable,
    .hljs-title,
    .hljs-type,
    .hljs-variable {
        color: #7641bb;
    }
}