.mail-list-entry {
    @include scut-clearfix;

    border-bottom: 1px solid white;
    transition: background-color 150ms ease-out;
    font-weight: bold;
    height: 80px;
    position: relative;

    // Workaround:
    // Foundation is of the opinion that a 1.6 line height for all lists
    // is a totally good idea. Please remove when Foundation is gone
    line-height: normal;

    &.status-read {
        font-weight: normal;
        color: $attachment_text;

        .mail-list-entry__checkbox::after {
          display: none;
        }
    }


    &.selected {
        background: $light_blue;
        z-index: 10; // overlay the box-shadow of the right page (z-index: 2)

        &:hover {
            background: $light_blue;
        }

        a {
          color: $white;
        }
    }

    &:hover {
        background: darken($contrast, 5%);
    }

    &__checkbox {
        margin-right: 5px;
        display: block;
        float: left;
        margin: {
          top: 8px;
          left: 20px;
        }

        &::after {
          content: '';
          display: inline-block;
          width: 8px;
          height: 8px;
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
          border-radius: 15px;
          background-color: $bullet-blue;
          position: absolute;
          left: 48px;
          top: 13px;
        }

        & > input[type=checkbox] {
            @include check-box;
        }
    }

    &__item {
        display: block;
        color: $dark_grey;
        padding: 8px 10px 10px 67px;
        height: 100%;

        &-from {
            white-space: nowrap;
            font-size: 0.8em;
            overflow: hidden;
            text-overflow: ellipsis;
            padding-right: 3.5em;
        }

        &-date {
            font-size: 0.7em;
            float: right;
            display: inline-block;
        }

        &-subject {
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 85%;

            &-icon {
                color: $light_gray;
            }
        }

        &-attachment {
            width: 14px;
            text-align: right;
            display: inline-block;
            float: right;
            color: $light_gray;
        }

        &-tags {
            @include tags;

            // Workaround:
            // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom
            // for all lists is a totally good idea. Please remove when Foundation is gone
            line-height: normal;
            margin-bottom: 0;
        }

        &:hover, &:focus, &:active {
            color: $dark_grey;
        }
    }
}