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

.due-date-icon {
    display: inline-block;
    margin: 0 .25rem;
    position: relative;
    svg {
        fill: $gray-light;
        transition: fill .2s ease-in;
    }
    &.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,
.related-tasks .task-name {
    .due-date-icon {
        top: .1rem;
    }
}

.issues-table .subject .due-date-icon {
    top: .25rem;
}

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

.due-date-button-wrapper {
    display: flex;
    position: relative;
}

.date-picker-container {
    overflow: visible;
}

.date-picker-popover {
    background: $white;
    border: 1px solid $gray;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: auto;
    .pika-single.is-bound {
        border: 0;
        box-shadow: none;
    }
}

.date-picker-popover-footer {
    padding: .2rem .5rem;
    text-align: right;
    svg {
        fill: $gray;
        height: 1rem;
        width: 1rem;
    }
    a:hover svg {
        fill: $red;
    }
}