@import '../../../styleConstants.scss';

$borderWidth: 3px;

#orders-list-container {
    .orders-tab {
        cursor: pointer;
    }
    .order-central-row {
        border-radius: 1.5px;
    }

    .order-border-open {
        border-left: $borderWidth $open-status-color solid;
    }

    .order-border-processing {
        border-left: $borderWidth $in-progress-status-color solid;
    }

    .order-border-completed {
        border-left: $borderWidth $production-status-color solid;
    }

    .order-border-end-of-life {
        border-left: $borderWidth $end-of-life-status-color solid;
    }

    .order-border-cancelled {
        border-left: $borderWidth $canceled-status-color solid;
    }

    .cl-photo{
        width: 2rem;
        height: 2rem;
    }

    .order-number {
        display: inline-block;
        padding-left: 1rem;
        bottom: 0;
    }

    .package-photo {
        padding-left: 1rem;
        width: 20%;
    }

    .package-info-col {
        width: 100%;
    }

    .actions-button {
        background-color: $whiteColor;
        color: $darkGreyColor;
        cursor: pointer;
    }

    .actions-button:hover{
        background: rgba(113, 194, 191, 0.5);
    }

    .status-icon {
        width: $font-size-xsmal;
        height: $font-size-xsmal;
        display: inline-block;
        border-radius: 50%;
        margin-right: 0.5rem;
    }

    .open {
        background: $open-status-color;
    }

    .processing {
        background: $in-progress-status-color;
    }

    .completed {
        background: $production-status-color;
    }

    .order-item-cl {
        display: inline-flex;
    }

    .cl-contact-name {
        font-weight: $font-weight;
        color: $darkGreyColor;
        font-size: $font-size-small;
    }

    .cl-name {
        font-weight: unset;
        font-size: $font-size-msmall;
        color: $warmGreyColor;
    }

    .cl-details {
        margin-left: 1rem;
    }

    .package-name {
        display: inline-block;
        padding-left: 1rem;
        bottom: 0;
        font-size: $font-size-small;
        font-weight: $font-weight;
        width: 80%;
    }

    .order-details-container {
        padding-left: 1rem;
    }

    .toggle-view-packages {
        cursor: pointer;
    }

    .actions-link {
        color: $darkGreyColor;
        text-decoration: none;
    }

    .actions-item {
        cursor: pointer;
    }
}
