@function progress-color($value) {
    $color-0: rgb(255, 145, 0);
    $color-50: rgb(251, 255, 45);
    $color-100: rgb(0, 158, 92);
   // Return the color using HSL color format
   @if ($value > 75){
        @return mix($color-100,$color-50,($value - 75)*4);
   }@else{
        @return mix($color-50, $color-0, calc($value*4/3));
   }
  }

.datalist,
.list {

    .listitem {
        position: relative;

        @for $i from 1 through 10 {
            .progress-bg-#{$i} {
                background-color: progress-color($i*10);
            }
        }

        &+.listitem {
            border-top: $border-light;
        }

        &.bg-green {
            background-color: rgb(215, 248, 215);
        }

        &.bg-red {
            background-color: rgb(255, 238, 238);
        }

        &.listitem-muted {
            background-color: rgb(241, 241, 241);
        }

        &.listitem-important {
            background-color: rgb(255, 247, 204);
        }

        &.listitem-highlighted {
            background-color: rgb(255, 253, 142);
        }

        &.listitem-attention {
            background-color: rgb(255, 234, 234);
        }



        &.bg-state1,
        &.bg-state2 {
            background-color: rgb(255, 229, 229); 
        }

        &.bg-state10, &.bg-state11 {
            background-color: rgb(231, 231, 231);
        }

        &.bg-state20 {
            background-color: rgb(255, 253, 228);
        }

        &.bg-state30 {
            background-color: rgb(234, 255, 253);
        }

        &.bg-state50 {
            background-color: rgb(232, 253, 234);
        }

        @keyframes animationFrames{
            0% {
                //background-color: rgba(rgb(255, 255, 255),0.7);
                opacity: 0.7;
            }
            50% {
                //background-color: rgba(rgb(255, 255, 255),1);
                opacity: 1;
            }
            100% {
                //background-color: rgba(white,0.7);
                opacity: 0.7;
            }
        }
              
        .spinner{
            position: absolute;
            top: 0;
            width: 100%;
            background-color: rgba(rgb(255, 255, 255),0.9);
            padding: 1.4rem;
            height: 100%;
            font-size: 2rem;
            animation: animationFrames ease-in-out 2000ms;
            animation-iteration-count:infinite;
            //transform-origin: 50% 50%;
            animation-fill-mode:forwards;
        }

        &.listitem-sm .spinner{
            padding: 0.25rem;
            font-size: 1.2rem;
        }

    }

}

.datalist>.listitem:hover {

    .listitem-content {
        //filter:  hue-rotate(90deg);
        background-color: rgba($primary-color, 0.05);
        //border-bottom: 1px solid rgb(201, 201, 201);

        .progress-bar {
            filter: brightness(110%);
        }

        .pill{
            background-color: rgb(223, 223, 223);
            &:hover{
                background-color: lighten($primary-color,20);
            }
        }
    }

    .showonhover{
        opacity: 1;
        &.btn{
            pointer-events: auto;
        }
    }
}

.listitem-content {
    position: relative;
    transition: background-color 0.4s;
    padding: 0.25rem 1rem;
    overflow-wrap: break-word;
    word-wrap: break-all;
}

.li-icon {
    vertical-align: top;
    text-align: center;
    max-width: 5rem;

    img {
        width: 2.5rem;
        height: 2.5rem;
    }

    i {
        margin-top: 0.4rem;
        font-size: 2.2rem;
        color: $primary-color;
        transition: background-color 0.4s;
    }

    @media screen and (max-width: 480px) {
        //display: none;
    }

}

.li-label {
    font-size: 0.7rem;
    font-weight: 400;
    color: $primary-color;
}

.datalists {

    .name {
        font-size: 1.1rem;
        color: $primary-color;
        font-weight: 600;

        & .lang-si {
            margin-bottom: -0.4rem;
        }

        & .lang-en {
            margin-bottom: -0.3rem;
        }
    }

    .title {
        font-size: 0.9rem;
        color: rgb(92, 92, 92);
        margin-bottom: -0.1rem;
    }

    .phone {
        color: $color-dark;
        font-weight: 600;
        font-size: 1.1rem;
    }
}

.date-box {
    font-weight: 600;
    max-width: 3rem;
    margin: auto;
    $border: 1px solid rgba(87, 87, 87, 0.2);
    margin-top: 0.2rem;

    .year {
        //background-color: $primary-color;
        font-size: 0.8rem;
        //border-radius: 0.25rem 0.25rem 0 0;
        color: rgb(39, 39, 39);
        padding: 0.1rem;
        //border: $border;
    }

    .month {
        //background-color: rgb(160, 209, 255);
        color: rgb(90, 90, 90);
        font-size: 0.7rem;
        //border: $border;
    }

    .date {
        font-size: 1.1rem;
        //background-color: rgb(255, 255, 255);
        color: rgb(48, 48, 48);
        //border-radius: 0 0 0.25rem 0.25rem;
        //border: $border;
        border-top: none;
        font-size: 1.5rem;
        margin-top: -0.5rem;
    }
}

.btn-addfile {
    background-color: rgb(250, 250, 139);
    color: black;
    font-weight: 600;
    padding: 0.2rem;
    border: 1px solid rgb(192, 192, 192);
    border-radius: 0.25rem;
    box-shadow: 2px;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;

    &:hover {
        background-color: rgb(251, 255, 0);
        transition: background-color 0.2s;
    }

}
