@import 'components/confirmation-footer/confirmation-footer';
@import 'components/confirmation-network-switch/index';
@import 'templates/flask/snap-confirm/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%;

    &__label {
      word-break: break-all;
    }
  }
}