@use "../common/utils" as *;
@use "../common/mixins" as *;

.order {
    background: rgba(var(--color-background));
    display: block;
    border-radius: calc-rem(15px);
    padding: calc-rem(20px);
    position: relative;
    margin: calc-rem(0 0 10px 0);
    transition: background-color 0.3s ease;
    text-decoration: none !important;

    h3, p {
        margin-bottom: 0;
        line-height: 1.5;
    }

    h3 {
        font-size: calc-rem(14px);
    }

    &__label {
        position: absolute;
        top: calc-rem(15px);
        right: 0;
        background: rgba(var(--color-primary), 1);
        padding: calc-rem(5px 15px);
        color: #FFF;
        border-bottom-left-radius: calc-rem(10px);
        border-top-left-radius: calc-rem(10px);
        font-weight: var(--font-weight-bold);
        display: flex;
        align-items: center;

        svg {
            margin-right: calc-rem(5px);
            width: calc-rem(16px);
            height: calc-rem(16px);
        }
    }

    &:hover {
        background: rgba(var(--color-border), .6);
        transition: background-color 0.3s ease;
    }
}
