/************* Account: Saved wines *************/

/* The saved wines page: the account shell (account/global.css) around the shared
   wine rows (wine-list.css, with the saved wine's remove button). This file lays
   out the toolbar above the rows, the undo row a removed wine leaves, and the
   loading, error and empty states. */

/* width, gutters and the nav's column come from .accountPage */
#wishlist {
}

/************* Header *************/

/* the title row's layout comes from .accountPageHeader */
#wishlistHeader {
}

#wishlistHeaderText {
    min-width: 0;
}

/* size from .accountPageTitle */
#wishlistHeaderTextTitle {
}

/* size and colour from .accountPageIntro */
#wishlistHeaderTextIntro {
}

/* a failed remove or undo, above the list */
#wishlistNotice {
    display: none;
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: #FFF;
    color: var(--danger);
    font-size: 15px;
    font-weight: 600;
}

#wishlistNotice.active {
    display: block;
}

/************* Toolbar *************/

/* "4 saved wines" and Sort by, over the rows; shown once the wines are in */
#wishlistToolbar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-top: 32px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}

#wishlistToolbar.active {
    display: flex;
}

#wishlistToolbarTitle {
    font-size: var(--font-size-h2);
    font-weight: 800;
    line-height: 1.25;
}

/* sorting only helps with two or more wines */
#wishlistToolbarSort {
    display: none;
    align-items: center;
    gap: 10px;
}

#wishlistToolbarSort.active {
    display: flex;
}

#wishlistToolbarSortLabel {
    flex: none;
    font-size: 14px;
    font-weight: 700;
}

#wishlistToolbarSortSelect {
    width: auto;
    min-width: 200px;
    font-size: 15px;
}

/* the screen reader count after each change */
#wishlistStatus {
}

/************* List *************/

/* the rows come from wine-list.css */
#wishlistList {
}

/* skeleton rows while the wines load, in the row's shape */
#wishlistListLoading {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
}

.wishlistListLoadingRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}

.wishlistListLoadingRowName {
    width: 55%;
}

.wishlistListLoadingRowPrice {
    width: 80px;
}

/* a failed load: the reason and a retry */
#wishlistListError {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

#wishlistListErrorText {
    font-size: var(--font-size-body);
}

#wishlistListErrorRetry {
}

/* the row a removed wine leaves: "Removed." and the wine, with Undo on the right */
.wishlistUndo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 10px 10px 16px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface);
    font-size: 15px;
}

.wishlistUndoText {
    flex: 1;
    min-width: 0;
    color: var(--muted);
}

.wishlistUndoTextLead {
    color: var(--black);
    font-weight: 700;
}

.wishlistUndoButton {
    flex: none;
}

/************* Footer *************/

#wishlistHint {
    display: none;
    margin-top: 8px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    line-height: 1.5;
}

#wishlistHint.active {
    display: block;
}

/************* Empty *************/

#wishlistEmpty {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
}

#wishlistEmpty.active {
    display: flex;
}

#wishlistEmptyTitle {
    font-size: var(--font-size-h3);
    font-weight: 700;
}

#wishlistEmptyText {
    color: var(--muted);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

#wishlistEmptyLink {
    margin-top: 8px;
}

/************* Phone *************/

@media (max-width: 800px) {
    /* on the phone's tinted card band (wine-list.css) the Undo line is a card too */
    .wishlistUndo {
        border: 1px dashed var(--tint-border);
        border-radius: var(--radius-card);
    }

    #wishlistToolbar {
        margin-top: 24px;
    }

    #wishlistToolbarSort {
        flex: 1 1 100%;
    }

    #wishlistToolbarSortSelect {
        flex: 1;
        min-width: 0;
    }
}