tg-due-date .due-date-button {
    background: $gray-light;
    display: inline-block;
    margin-right: .5rem;
    padding: 1rem;
    transition: background .2s linear;
    transition-delay: .1s;
    &.closed,
    &.closed[disabled] {
        background: $gray-lighter;
    }
    &.due-set {
        background: $yellow-green;
    }
    &.due-soon {
        background: $my-sin;
    }
    &.past-due {
        background: $red-light;
    }
    &:hover {
        background: $gray;
    }
    &.editable {
        cursor: pointer;
    }
}

tg-due-date .due-date-icon {
    display: inline-block;
    line-height: .1rem;
    margin: 0 .25rem;
    position: relative;
    top: .1rem;
    svg {
        fill: $gray-light;
        height: 1.1rem;
        transition: fill .2s ease-in;
        width: 1.1rem;
    }
    .closed svg {
        fill: $gray-lighter;
    }
    .due-set svg {
        fill: $yellow-green;
    }
    .due-soon svg {
        fill: $my-sin;
    }
    .past-due svg {
        fill: $red-light;
    }
}

.backlog-table-body .user-story-name .due-date-icon {
    top: .25rem;
}

.card-statistics .due-date-icon {
    margin: 0;
    svg {
        height: 1rem;
        width: 1rem;
    }
}