/* ~~~~~~~~~~~~~~~~~~~~ DIALOG STYLE ~~~~~~~~~~~~~~~~~~~~ */

.my-tokens .token-dialog {
    width: calc(100% - 4.8rem);
    max-width: 48rem;
    padding: 1.4rem;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(74, 90, 117, 0.08), 0px 20px 20px -12px rgba(74, 90, 117, 0.24);
}

@media screen and (min-width: 768px) {
    .my-tokens .token-dialog {
        padding: 4rem 6.4rem;
    }
}

.my-tokens .token-dialog h3,
.my-tokens .token-dialog p {
    margin: 0 0 2.4rem;
}

.my-tokens .dialog-actions {
    display: flex;
    gap: 2.4rem;
}

.my-tokens .dialog-actions button {
    width: 100%;
    min-width: fit-content;
}

.my-tokens .error-banner {
    position: fixed;
    bottom: 48px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    border-width: 0 0 0 4px;
    border-left: solid #E71D32;
    background: #F9DDDD;
    color: #6E1919;
    transition: all 0.2s ease-out;
    opacity: 1;
    box-shadow: 0px 2px 10px rgba(74, 90, 117, 0.08), 0px 20px 20px -12px rgba(74, 90, 117, 0.24);
}

.my-tokens .error-banner.hide-animation {
    transition: all 0.2s ease-out;
    opacity: 0;
    bottom: 24px;
}

/* ~~~~~~~~~~~~~~~~~~~~ GRID STYLE ~~~~~~~~~~~~~~~~~~~~ */

.my-tokens .token-list {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(min-content, auto) minmax(10rem, auto) minmax(min-content, max-content);
    border-radius: 10px;
    filter: drop-shadow(0px 4px 16px rgba(74, 90, 117, 0.06)) drop-shadow(0px 2px 4px rgba(74, 90, 117, 0.16));
    overflow-x: auto;
}

.my-tokens .token-list h5,
.my-tokens .token-list p {
    margin: 0;
    word-break: keep-all;
}

.my-tokens .token-list > * {
    display: flex;
    align-items: center;
    min-height: 4.8rem;
    padding: 0.2rem 0.6rem;
    gap: 0.25em;
}

.my-tokens .token-list > *:not(:nth-last-child(-n + 3)) {
    border-bottom: 1px solid #D3D9DE
}

.my-tokens .token-list .column-header:first-child,
.my-tokens .token-list .grid-cell:nth-child(3n - 2) {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}

.my-tokens .token-list .column-header:nth-child(2),
.my-tokens .token-list .grid-cell:nth-child(3n - 1) {
    padding-right: 2.4rem;
}

.my-tokens .token-list .column-header:nth-child(3),
.my-tokens .token-list .grid-cell:nth-child(3n) {
    padding-right: 2.4rem;
}

.my-tokens .token-list .token-label {
    flex-shrink: 8;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ~~~~~~~~~~~~~~~~~~~~ PAGINATOR STYLE ~~~~~~~~~~~~~~~~~~~~ */

.my-tokens .paginator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.2rem;
    padding-right: 1.6rem;
    gap: 2.4rem;
}

.my-tokens .paginator .paginator-actions {
    display: flex;
    align-items: center;
}

.my-tokens .paginator-actions fieldset {
    padding: 0;
    border: none;
}

/* ~~~~~~~~~~~~~~~~~~~~ LIST MENU STYLE ~~~~~~~~~~~~~~~~~~~~ */

.my-tokens .list-menu {
    display: flex;
    justify-content: end;
    margin-bottom: 2.4rem;
}

.my-tokens .list-menu.empty-list {
    justify-content: start;
}

/* ~~~~~~~~~~~~~~~~~~~~ MISC ~~~~~~~~~~~~~~~~~~~~ */

.my-tokens .input-wrapper {
    margin-bottom: 2.4rem;
}

.my-tokens .input-wrapper input {
    float: none;
    width: 100%;
}

.my-tokens .input-wrapper p {
    margin: 0.4rem 0 0;
}

.my-tokens .action-wrapper {
    display: contents;
}