@import 'components/confirmation-footer/confirmation-footer'; @import 'components/confirmation-network-switch/index'; @import 'templates/snaps/snap-prompt/index'; .confirmation-page { width: 100%; height: 100%; position: relative; background: var(--color-background-default); display: grid; flex-direction: column; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'navigation' 'content' 'footer'; a { color: var(--color-primary-default); } &__content { grid-area: content; min-width: 0; & > :last-child { margin-bottom: 16px; } } &__navigation { @include H7; grid-area: navigation; background-color: var(--color-background-alternative); border-bottom: 1px solid var(--color-border-muted); padding: 6px 16px 5px 16px; color: var(--color-text-alternative); display: grid; grid-template-columns: 1fr minmax(0, auto) minmax(0, auto); align-items: center; } &__navigation-button { background-color: var(--color-background-default); border-radius: 100px; color: var(--color-text-alternative); font-size: $font-size-h6; height: 20px; width: 20px; padding: 0; &:disabled { cursor: not-allowed; background-color: var(--color-background-alternative); color: var(--color-text-muted); } } &__navigation &__navigation-button:last-child { margin-left: 8px; } .chip { max-width: 100%; height: 40px; &__label { word-break: break-all; } } }