@import './variables';

@mixin text-size($name) {
    font-size: var(--yc-text-#{$name}-font-size);
    line-height: var(--yc-text-#{$name}-line-height);
}

@mixin reset-list-style() {
    margin: 0;
    padding: 0;
    list-style: none;
}

@mixin fixAnchorPosition($offset: 0px) {
    padding-top: calc(var(--dc-header-height, #{$headerHeight}));
    margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight}));
}

@mixin reset-link-style() {
    color: inherit;
    text-decoration: none;
}

@mixin islands-focus() {
    outline: none;

    .utilityfocus &:focus {
        outline: 2px solid #ffdb4d;
    }
}

@mixin link() {
    @include islands-focus();

    color: var(--yc-color-text-link);
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &:active {
        color: var(--yc-color-text-link-hover);
    }
}

@mixin heading1() {
    @include text-size(display-3);
    font-weight: 500;

    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
        @include text-size(display-2);
    }
}

@mixin heading2() {
    @include text-size(display-1);
    font-weight: 500;
}

@mixin heading3() {
    @include text-size(header-2);
    font-weight: 500;
}

@mixin heading4() {
    @include text-size(header-1);
    font-weight: 500;
}

@mixin heading5() {
    @include text-size(body-3);
    font-weight: 500;
}

@mixin heading6() {
    @include text-size(body-3);
    font-weight: 400;
}

@mixin contributors-text() {
    font-size: 13px;
    font-weight: 400;
    margin-right: 5px;
    align-self: center;
}

@mixin text-body-1() {
    font-size: var(--yc-text-body-1-font-size);
    line-height: var(--yc-text-body-1-line-height);
    font-weight: var(--yc-text-body-font-weight);
}

@mixin desktop-only() {
    @media (max-width: map-get($screenBreakpoints, 'md') - 1) {
        display: none;
    }
}

@mixin desktop-tablet-only() {
    @media (max-width: map-get($screenBreakpoints, 'sm') - 1) {
        display: none;
    }
}

@mixin mobile-tablet-only() {
    @media (min-width: map-get($screenBreakpoints, 'md')) {
        display: none;
    }
}

@mixin mobile-only() {
    @media (min-width: map-get($screenBreakpoints, 'sm')) {
        display: none;
    }
}