/* codecake global styles */
.codecake {
    display: flex;
    font-family: "Source Code Pro", monospace;
    letter-spacing: normal;
    min-height: 0;
    padding: 20px;
    width: 100%;
}
.codecake-editor {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    line-height: 20px;
    overflow: auto;
    overflow-wrap: normal;
    outline: none;
    width: 100%;
    white-space: pre; /* pre-wrap */
    word-wrap: normal;
}
.codecake-gutters {
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 48px;
}
.codecake-lines {
    bottom: 0px;
    color: currentColor;
    font-size: 12px;
    line-height: 20px;
    opacity: 0.5;
    overflow: hidden;
    padding-right: 16px;
    position: absolute;
    right: 0px;
    text-align: right;
    top: 0px;
}
.codecake-lines > div {
    margin-bottom: 4px;
    min-height: 16px;
}
.codecake-lines > div:not(:first-child) {
    margin-top: 4px;
}

/* Terrible hack to hide last empty line in editor */
.codecake-editor .line:last-child,
.codecake-lines > div:last-child {
    display: none !important;
}

/* Editor scrollbar */
.codecake-editor::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.codecake-editor::-webkit-scrollbar-track {
    background-color: transparent;
}
.codecake-editor::-webkit-scrollbar-thumb {
    background-color: currentColor;
    border-radius: 16px;
}
.codecake-editor::-webkit-scrollbar-button {
    display: none;
}
.codecake-editor::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* codecake light theme */
.codecake-light {
    background-color: #fafafa;
    color: #101623;
}
.codecake-light .codecake-editor::-webkit-scrollbar-thumb {
    background-color: #dedfe3;
}
.codecake-light .codecake-editor::-webkit-scrollbar-thumb:hover {
    background-color: #cbccd2;
}
.codecake-light .codecake-lines {
    /* color: #6cb1c5; */
    color: #878a98;
}

.codecake-light .token-operator, 
.codecake-light .token-number,
.codecake-light .token-unit {
    color: #e57697;
}
.codecake-light .token-punctuation, 
.codecake-light .token-property,
.codecake-light .token-selector-pseudo,
.codecake-light .token-selector-attr,
.codecake-light .token-quote,
.codecake-light .token-code {
    color: #3a464e;
}
.codecake-light .token-keyword,
.codecake-light .token-bullet {
    color: #b351d9;
}
.codecake-light .token-constant {
    color: #20118a;
}
.codecake-light .token-attribute,
.codecake-light .token-tag,
.codecake-light .token-title.function,
.codecake-light .token-selector-tag,
.codecake-light .token-section {
    color: #3a9ff2;
}
.codecake-light .token-attr,
.codecake-light .token-selector-class,
.codecake-light .token-link {
    color: #f38d00;
}
.codecake-light .token-string {
    color: #00a17d;
}
.codecake-light .token-comment {
    color: #969896;
}

/* codecake dark theme */
.codecake-dark {
    background-color: #272b3f;
    color: #aab2d4;
}
.codecake-dark .codecake-editor::-webkit-scrollbar-thumb {
    background-color: #99aaff15;
}
.codecake-dark .codecake-editor::-webkit-scrollbar-thumb:hover {
    background-color: #99aaff22;
}
.codecake-dark .codecake-lines {
    color: #757ca3;
}

.codecake-dark .token-attr,
.codecake-dark .token-selector-tag {
    color: #80d0ff;
}
.codecake-dark .token-comment,
.codecake-dark .token-quote {
    color: #58628d;
}
.codecake-dark .token-constant, 
.codecake-dark .token-number,
.codecake-dark .token-bullet,
.codecake-dark .token-link {
    color: #ffae80;
}
.codecake-dark .token-title.function,
.codecake-dark .token-section {
    color: #22c1dd;
} 
.codecake-dark .token-attribute,
.codecake-dark .token-tag,
.codecake-dark .token-code,
.codecake-dark .token-strong {
    color: #6e9af7;
}
.codecake-dark .token-keyword {
    color: #af89f5;
}
.codecake-dark .token-operator,
.codecake-dark .token-selector-attr {
    color: #ad388c;
}
.codecake-dark .token-property,
.codecake-dark .token-selector-class {
    color: #bdc7f5;
}
.codecake-dark .token-selector-pseudo,
.codecake-dark .token-punctuation,
.codecake-dark .token-emphasis {
    color: #8bb3f4;
}
.codecake-dark .token-string {
    color: #9bcd65;
}
.codecake-dark .token-unit {
    color: #dd556e;
}

/* MonoBlue theme */
.codecake-monoblue {
    background-color: #eef2f6;
    color: #011e48;
}
.codecake-monoblue .token-keyword, 
.codecake-monoblue .token-tag,
.codecake-monoblue .token-selector-tag, 
.codecake-monoblue .token-section {
    font-weight: bold;
}
.codecake-monoblue .token-string,
.codecake-monoblue .token-section {
    color: #1086ce;
}
.codecake-monoblue .token-comment {
    color: #8e9eaf;
}
.codecake-monoblue .token-code,
.codecake-monoblue .token-quote,
.codecake-monoblue .token-tag, 
.codecake-monoblue .token-attr,
.codecake-monoblue .token-attribute,
.codecake-monoblue .token-selector-class,
.codecake-monoblue .token-punctuation {
    color: #224d84;
}
.codecake-monoblue .token-bullet {
    color: #8fc8f3;
}

/* One Light theme */
/* Inspired in https://github.com/akamud/vscode-theme-onelight */
.codecake-one-light {
    background-color: #fafafa;
    color: #393c46;
}
.codecake-one-light .token-keyword {
    color: #a329a1;
}
.codecake-one-light .token-string,
.codecake-one-light .token-attribute {
    color: #54ac53;
}
.codecake-one-light .token-constant {
    color: #0084bd;
}
.codecake-one-light .token-number,
.codecake-one-light .token-unit,
.codecake-one-light .token-selector-class,
.codecake-one-light .token-selector-attr,
.codecake-one-light .token-selector-pseudo,
.codecake-one-light .token-attr {
    color: #a37000;
}
.codecake-one-light .token-bullet,
.codecake-one-light .token-title.function {
    color: #4279f0;
}
.codecake-one-light .token-quote,
.codecake-one-light .token-comment {
    color: #a3a4a8;
}
.codecake-one-light .token-section,
.codecake-one-light .token-tag,
.codecake-one-light .token-selector-tag {
    color: #e74a3c;
}
.codecake-one-light .token-builtin {
    color: #bb8002;
}

/* One Dark theme */
/* Inspired in https://github.com/akamud/vscode-theme-onedark */
.codecake-one-dark {
    background-color: #282c34;
    color: #b6bdc8;
}
.codecake-one-dark .token-keyword {
    color: #ca78e2;
}
.codecake-one-dark .token-string,
.codecake-one-dark .token-attribute {
    color: #93bd75;
}
.codecake-one-dark .token-bullet,
.codecake-one-dark .token-title.function {
    color: #62adea;
}
.codecake-one-dark .token-constant {
    color: #5cb6c1;
}
.codecake-one-dark .token-quote,
.codecake-one-dark .token-comment {
    color: #5f6672;
}
.codecake-one-dark .token-number,
.codecake-one-dark .token-unit,
.codecake-one-dark .token-selector-class,
.codecake-one-dark .token-selector-attr,
.codecake-one-dark .token-selector-pseudo,
.codecake-one-dark .token-attr {
    color: #d19761;
}
.codecake-one-dark .token-section,
.codecake-one-dark .token-tag,
.codecake-one-dark .token-selector-tag {
    color: #e4727b;
}
.codecake-one-dark .token-builtin {
    color: #e4b867;
}

/* Common styles */
.codecake-light .token-strong,
.codecake-dark .token-strong,
.codecake-monoblue .token-strong,
.codecake-one-light .token-strong,
.codecake-one-dark .token-strong {
    font-weight: bold;
}
.codecake-light .token-emphasis,
.codecake-dark .token-emphasis,
.codecake-monoblue .token-emphasis,
.codecake-one-light .token-emphasis,
.codecake-one-dark .token-emphasis {
    font-style: italic;
}