.orders-page {
    div[id="allEntries"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        @media (width<=640px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

.orders-page__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 20px;
}

.orders-sorting__container {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.sort-button {
    font-size: var(--text-size-xm);
    position: relative;
    color: var(--txt-quote);
    margin-inline-start: 10px;
    display: flex;
    gap: 5px;
    --width: 35px;
    --height: 20px;

    &:before {
        content: '';
        width: var(--width);
        height: var(--height);
        background-color: gray;
        border-radius: 50px;
    }

    &:after {
        content: '';
        width: calc(var(--width) / 2 + 2px);
        height: calc(var(--height) - 2px);
        background: white;
        position: absolute;
        top: 1px;
        left: 2px;
        display: flex;
        border-radius: 50%;
        transition: all ease .2s;
        cursor: pointer;
        justify-content: center;
        color: var(--btn-all)
    }

    &.sort-on:before {
        background-color: var(--marker);
    }

    &.sort-on:after {
        left: calc(var(--width) / 2 - 3px);
        content: 'I';
    }
}

.order__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.order__item {
    background-color: var(--background-theme);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: var(--text-size-xm);
    position: relative;
    overflow: hidden;

    &:has(#order-detail-show:focus-within) .order-item__details {
        bottom: 0;
    }
}

.order-item__details {
    background-color: var(--background);
    padding: 20px;
    border-radius: 10px 10px 0 0;
    position: absolute;
    bottom: -100%;
    left: 10px;
    right: 10px;
    transition: all ease .2s;
    white-space: pre-wrap;
    box-shadow: 0 -5px 15px #00000020;
}

.order-status {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-block-end: 10px;
    padding: 3px;
    border-radius: 5px;
    background-color: var(--background);
}

.order-item__parameter {
    margin-block-end: 5px;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;

    & s {
        flex: 1 1 0;
        border-bottom: 2px dotted var(--txt-quote);
    }

    &.--wild {
        display: block;
    }
}

.order-item__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 20px;
    font-size: var(--text-size-tooltip);
    width: 100%;
    margin-block: auto 0;
}

.order-button {
    color: light-dark(var(--txt-all), var(--btn-all-hover));
    background-color: var(--background);
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 2 - 5px);
    flex: 1 1 0;
    margin: 0 !important;

    &.--green {
        background-color: var(--marker);
    }

    &:hover {
        background-color: light-dark(var(--btn-all-hover), var(--background-double-hover));
    }

    & .symbols {
        margin-inline-end: 5px;
    }
}

.order__item:hover .order-item__panel {
    top: 10px
}

.order-item__panel {
    display: flex;
    gap: 10px;
    justify-content: center;
    transition: all ease .2s;
    position: absolute;
    top: -100%;
    left: 10px;
    right: 10px;
    background-color: var(--background-theme);
    border-radius: 5px;
    padding: 10px;

    & a {
        padding: 5px;
        background: light-dark(var(--background), var(--btn-all));
        border-radius: 5px;
        margin: 0;
        color: var(--txt-all)
    }

    & a:hover {
        background-color: var(--background-double-hover);
    }
}