@import 'mediawiki.skin.variables';
@import 'variables.less';

#toc-sticky {
    flex: 0 0 300px;
    /*order: 3;*/
    display: none;
    position: sticky;
    align-self: flex-start; /* sticky를 위해 필요 */
    padding: 8px;
    top: 0;
    width: 300px;
    max-height: calc(~"100vh - 30px");
    overflow: hidden;
    flex-direction: column;
    font-size: @font-size-small;

    a, a:visited {
        color: @color-link-base;
    }

    > div {
        overflow-y: auto;
    }

    h1 {
        text-transform: uppercase;
        /*height: 50px;*/
        font-size: 1em;
        cursor: pointer;
        text-align: center;
        padding: 10px;
        margin: 0;
        border: 0;
    }

    input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 30px;
        margin-top: 8px;
        opacity: 0;
    }

    input ~ div {
        display: none;
    }

    input:checked ~ div {
        display: block;
    }

    li {
        list-style-type: none;
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }

    ul {
        margin-top: 0
    }

    @media ( min-width: @width-breakpoint-tablet ) {
        display: flex;
    }
}

#mw-content-text #toc {
    /* 본문에 나타나는 TOC */
    font-size: @font-size-small; /* 기본으로 95% 로 되어있는 거 fix */
    border-color: var(--color-border-toc-inner);
    background-color: var(--color-bg-toc-inner);
    color: inherit;

    /* '목차' 글자 */
    h2#mw-toc-heading {
        font-size: 1em;
    }

    /* 번호 텍스트 */
    .tocnumber {
        color: @color-text-base;
    }

    /* 링크 및 '숨기기'(.toctogglelabel) 텍스트 */
    .toctogglelabel, a {
        color: @color-link-base;
    }

    @media ( min-width: @width-breakpoint-tablet ) {
        display:none !important;
    }
}
