@use '@taiga-ui/core/styles/taiga-ui-local' as taiga;

::ng-deep html,
::ng-deep body,
tui-root {
  height: 100%;
  margin: 0;
  color: var(--tui-text-primary);
}

main {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--tui-background-accent-opposite-hover);
}

.logo {
  width: 6rem;
  margin-bottom: -2rem;
  z-index: 1;
}

.card {
  max-width: min(30rem, 90vw);
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 0.25rem;
  margin-bottom: -2rem;
  h2 {
    margin-top: 0;
  }
}

.back {
  position: absolute;
  top: 1rem;
}

.pages {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.options {
  @include taiga.transition(margin);

  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem;
  box-sizing: border-box;

  &_selected {
    margin-left: -100%;
  }
}

[tuiCell]:not(:last-of-type) {
  box-shadow: 0 calc(0.5rem + 1px) 0 -0.5rem var(--tui-border-normal);
}