@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

h1.ui.header {
    font-size: rem(24px);
    font-weight: $fontWeightBold;
    &.header-subheader .subheader { font-size: rem(16px); }
}
h2.ui.header {
    font-size: rem(20px);
    font-weight: $fontWeightBold;
    &.header-subheader .subheader { font-size: rem(16px); }
}
h3.ui.header {
    font-size: rem(18px);
    font-weight: $fontWeightSemiBold;
    &.header-subheader .subheader { font-size: rem(16px); }
}
h4.ui.header {
    font-size: rem(16px);
    font-weight: $fontWeightSemiBold;
    &.header-subheader .subheader { font-size: rem(14px); }
}
h5.ui.header {
    font-size: rem(14px);
    font-weight: $fontWeightRegular;
    &.header-subheader .subheader { font-size: rem(12px); }
}
h6.ui.header {
    font-size: rem(12px);
    font-weight: $fontWeightRegular;
    &.header-subheader .subheader { font-size: rem(10px); }
}

.ui.header.header-size- {
    &xlarge {
        font-size: em(24px);
        font-weight: $fontWeightBold;
        &.header-subheader .subheader { font-size: em(16px, 24px); }
    }
    &large {
        font-size: em(20px);
        font-weight: $fontWeightBold;
        &.header-subheader .subheader { font-size: em(16px, 20px); }
    }
    &medium {
        font-size: em(18px);
        font-weight: $fontWeightSemiBold;
        &.header-subheader .subheader { font-size: em(16px, 18px); }
    }
    &small {
        font-size: em(16px);
        font-weight: $fontWeightSemiBold;
        &.header-subheader .subheader { font-size: em(14px, 16px); }
    }
    &xsmall {
        font-size: em(14px);
        font-weight: $fontWeightRegular;
        &.header-subheader .subheader { font-size: em(12px, 14px); }
    }
    &xxsmall {
        font-size: em(12px);
        font-weight: $fontWeightRegular;
        &.header-subheader .subheader { font-size: em(10px, 12px); }
    }
}

.ui.header {
    margin: calc(2rem - .14285em) 0 1rem;
    position: relative;
    &:first-child { margin-top: 0; }
    &:last-child { margin-bottom: 0; }
    &.header-icon {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        width: 100%;
    }
    &.header-subheader .subheader { font-weight: $fontWeightRegular; }
    &.header-icon.header-subheader {
        align-items: flex-start;
        > div { display: block; }
            .icon { padding-top: em(3px); }
    }
    &.header-color-static { color: color(colorStatic); }
    &.header-color-text { color: color(color); }
    &.header-color-inverse {
        color: color(colorInverse);
        &.header-color-static { color: color(colorStatic); }
        &.header-color-text { color: color(colorInverse); }
    }
    &.header-anchor {
        .header-anchor-icon {
            opacity: 0;
            transition:
                opacity 150ms ease-out,
                margin 150ms ease-out;
            visibility: hidden;
        }
        &:hover .header-anchor-icon { margin-left: 11px; opacity: 1; visibility: visible; }
    }
    &.header-weight {
        &-bold { font-weight: $fontWeightBold; }
        &-normal { font-weight: $fontWeightRegular; }
        &-semibold { font-weight: $fontWeightSemiBold; }
    }
}