@use "_colours.scss";
@use "_typography.scss";

$unified-border-radius: 3px;

table:not(.nostyle) {
    border-collapse: collapse;
    
    margin: {
        top: 1rem;
        bottom: 1rem;
    }
    
    thead, tfoot {
        background-color: colours.$grey--05;
    }
    
    td, th {
        padding: calc(typography.$font-size / 4);
        border: 1px solid colours.$grey--40;
    }
    
    tr:hover {
        background-color: colours.$brand--05;
    }
    
    & > caption {
        padding-bottom: calc(typography.$font-size / 4);
    }
}

code {
    @include typography.font--monospace-regular;
    background-color: colours.$grey--05;
    color: colours.$grey--70;
    border-radius: $unified-border-radius;
}

code.block, pre > code {
    margin: {
        top: 10px;
        bottom: 10px;
    }
    padding: 5px;
    display: block;
    white-space: pre;
    overflow: scroll;
    line-height: 125%;
}

blockquote {
    background-color: colours.$grey--05;
    
    margin: 0;
    padding: 1em 2em;
    
    & > p:last-of-type {
        margin-bottom: 0;
    }
    
    border-left: 5px solid colours.$brand--50;
    border-radius: $unified-border-radius;
}

.toc-container {
    margin: {
        top: 1rem;
        bottom: 1rem;
    }
    
    $border-style: 1px solid colours.$grey--30;
    
    border: $border-style;
    border-radius: 6px;
    padding: 0.75em;
    
    .header {
        border-bottom: $border-style;
        padding-bottom: 0.75em;
        margin-bottom: 0.75em;
    }
    
    .content {
        ul {
            margin: 0;
            padding-left: 0.5em;
            list-style-type: none;   
            li {
                padding-bottom: 0.2em;
            }
        }
    }
}

.pill {
    @include typography.font--small;

    background-color: colours.$grey;
    color: white;
    font-weight: bold;

    padding: 0.15em 0.4em;
    border-radius: 0.5em;
}

a:has(> .pill) {
    text-decoration: none;

    & > .pill:hover {
        background-color: colours.$grey--60;
    }
}

.note {
    background-color: colours.$grey--05;
    border: 3px dashed colours.$grey--50;
    border-radius: $unified-border-radius;

    margin: 1em 0;

    &::before {
        // I slightly hate this but decided that a pseudo-element was better than actual elements
        position: relative;
        content: "note";

        font-size: 0.8em;
        top: -5px;
        left: -3px;
        padding: 2px 4px;
        background-color: colours.$grey--50;
        color: white;

        border-radius: $unified-border-radius 0 $unified-border-radius 0;
    }   

    .note-content {
        padding: {
            top: 0;
            bottom: 1.2em;
            left: 2em;
            right: 2em;
        }

        & > *:first-child {
            margin-top: 0;
        }

        & > *:last-child {
            margin-bottom: 0;
        }
    }
}

@mixin button {
    text-decoration: none;  // for if we're an anchor
    padding: 0.4em;
    
    border: 1px solid;
    border-radius: 6px;
}

.button-brand {
    @include button;
    border-color: colours.$brand--60; 
    background-color: colours.$brand--50;
    color: white !important;  // important to override anchors
    &:hover {
        background-color: colours.$brand--70;
    }
}

.button-grey {
    @include button;
    border-color: colours.$grey--30; 
    background-color: colours.$grey--20;
    color: unset !important;  // important to override anchors
    &:hover {
        background-color: colours.$grey--40;
    }
}
