/* Variables */
:root {    
    /* Spacing */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;
    --space-128: 128px;
    --space-256: 256px;
    
    /* Heights */
    --h-64: 64px;
    --h-40: 40px;
    --h-48: 48px;
    
    /* Sizes */
    --size-32: 32px;
    --size-36: 36px;
    --size-40: 40px;
    
    /* Colours */
    --bg-base: #EBEAEF;
    --bg-medium: #e1dfe9;
    --bg-soft-purple: #F5F4F8;
    --color-purple-01: #D7D3F4;
    --color-purple-06: #0E0433;
    --color-purple-04: #4D308C;
    --color-black: #090023;
    --bg-grey-05: #F2F2F2;
    --color-white: white;
    --color-purple-base: #8F7BD6;
    --colour-purple-base-dark: #7B67C2;
    --btn-gradient-hover: (180deg, #F4F3FF 0%, #DBD5FF 100%);
}


/* --------------------------------------------------------------------------------------------- */


/* Fonts */
@font-face {
    font-family: "Figtree";
    src: url('@fonts/figtree__var.woff2') format("woff2 supports variations"),
         url('@fonts/figtree__var.woff2') format("woff2-variations");
    font-weight: 200 700;
    font-style: normal;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}


/* --------------------------------------------------------------------------------------------- */


/* Defaults */
#file__01, #file__02, #file__03 {
    display: none;
}
.flashcard__icn, .summarising__tag, .date__tag {
    display: none !important;
}
flashcard-item {
    visibility: hidden;
}
#items__list {
    max-height: 1px;
    overflow: hidden;
}
.rive__loader  {
    width: 32px;
    height: 32px;
}
.rive__doc {
    width: 40px;
    height: 40px;
}
button {
    transition: background-color linear 0.128s;
    transition: background linear 0.128s;
}
body {
    background: var(--bg-base);
    font-family: Figtree, Helvetica, sans-serif;
}


/* --------------------------------------------------------------------------------------------- */


/* Overrides */ 
#welcome__box {
    cursor: url(assets/cursor__frame__01.svg) 20 20, auto;
}
.cursor-magic {
    cursor: url(assets/cursor__frame__02.svg) 20 20, auto;
}


/* --------------------------------------------------------------------------------------------- */


/* Sidebar */
.sidebar-items > div > div > a, .sidebar-items > a {
    transition: opacity ease 0.128s;
}
.sidebar-items > div > div > a:hover, .sidebar-items > a:hover {
    opacity: 100;
}

/* Modal/dialog */
dialog {
    max-height: calc(100vh - 64px);
}
dialog::backdrop {
    background-color: var(--color-purple-06);
    opacity: 0.48;
}

.highlight {
    background-color: #C5C0ED !important;
}


/* --------------------------------------------------------------------------------------------- */


/* Animations */
.fadeout {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.fadein {
    opacity: 0;
    transition: opacity 1s ease;
}