/**
 * Garage sidebar stylesheets
 */
.garage-aside {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--darkGrayBg);
    padding: 25px;
    min-height: 100%;
    min-width: var(--garage-aside-width);
    box-sizing: border-box;
    color: var(--grayOnDark);

    a:hover {
        color: #fff;
    }

    &__header {
        border-bottom: 1px solid color(var(--darkGrayBg) lightness(+10%));
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    &__logo {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 5px;
    }

    &__user {
        font-size: 16px;
        margin-top: 3px;
        display: block;
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    &__heading {
        margin-top: 45px;
        margin-bottom: 15px;
        font-size: 11px;
        letter-spacing: 0.13em;
    }

    &__section {
        margin: 0 0 15px;
        font-size: 15px;
    }

    &__project {
        display: block;
        color: #fff;
        margin-bottom: 10px;
        font-size: 16.2px;
        font-weight: 800;
        letter-spacing: -0.1px;

        &:hover {
            text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
        }
    }

    &__tag {
        display: flex;
        padding: 5px 7px;
        margin: 0 -7px;
        border-radius: 2px;
        cursor: pointer;

        &::before {
            content: '#';
            display: inline-block;
            margin-right: 0.4em;
            opacity: 0.4;
        }

        &:hover {
            background: color(var(--darkGrayBg) lightness(-3%));
        }
    }

    &__counter {
        display: inline-block;
        margin: auto 0 auto auto;
        font-weight: bold;
        font-size: 13px;

        &--unread {

          &::before {
              content: '';
              display: inline-block;
              width: 5px;
              height: 5px;
              margin-right: 0.3em;
              margin-top: -0.25em;
              vertical-align: middle;
              border-radius: 50%;
          }

        }

        &--fatal {
            color: var(--fatalColor);

            &::before {
                background: var(--fatalColor);
            }
        }

        &--warnings {
            color: color(var(--warningsColor) lightness(+4%));

            &::before {
                background: color(var(--warningsColor) lightness(+4%));
            }
        }

        &--notice {
            color: var(--noticeColor);

            &::before {
                background: var(--noticeColor);
            }
        }

        &--javascript {
            color: var(--javascriptColor);

            &::before {
                background: var(--javascriptColor);
            }
        }
    }

    &__add {
        font-size: 14px;
        letter-spacing: 0.2px;
        padding: 8px 15px;

        &::before {
            content: '';
            background: url(/static/svg/plus-white.svg) center no-repeat;
            background-size: 14px 14px;
            display: inline-block;
            vertical-align: bottom;
            width: 14px;
            height: 14px;
            margin: 0 6px 0 -5px;
        }
    }
}
