@import 'theme';
@import 'inputs';
@import 'tooltip';

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

.nolist {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        display: inline-block;
    }
}

.heading {
    color: var(--shadow);
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    transition: color var(--theme-transition);
}

.icon.icon-href {
    fill: $shadow;

    :hover {
        fill: $primary;
    }
}

.expand {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem .25rem;
    font-weight: bold;
    font-size: .9rem;
    cursor: pointer;

    .icon {
        fill: $shadow;
    }

    &:hover {
        background: $shadow-hint;

        .icon {
            fill: $shadow-strong;
        }
    }
}

.expand-sidebar:hover {
    background: $shadow-hint;
}

.expand-header {
    display: none;

    &:hover {
        background: $shadow-hint;
    }
}

.collapse-header {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: $profile;

    .icon {
        width: 100%;
        fill: $highlight;
        padding: .5rem 0;
    }

    &:hover .icon {
        background: $highlight-hint;
        fill: $text-contrast;
    }
}