@use "../../css/config/variables/sass" as *;

.block {
  width: 100%;
  max-width: $width-mobile;
  background-color: var(--colour1-tertiary);
  border: $size-thin solid var(--colour0-tertirary);
  border-radius: 10px;
  margin: 0 auto;
}

.list {
  position: relative;
  display: grid;
  grid:
    "current current" auto
    "previous next" auto
    "first last" auto
    / auto;
  gap: $size-normal;
  list-style: none;
  padding: $size-small;
  margin: 0;
}

.page {
  min-width: 6em;
}

.single {
  display: grid;
  justify-items: center;
}

.current {
  grid-area: current;
  justify-self: stretch;
  display: grid;
  justify-items: stretch;
  min-height: 4em;
}

.previous {
  grid-area: previous;
  justify-self: flex-start;
}

.next {
  grid-area: next;
  justify-self: flex-end;
}

.first {
  grid-area: first;
  justify-self: flex-start;
}

.last {
  grid-area: last;
  justify-self: flex-end;
}

.form {
  position: absolute;
  display: grid;
  justify-items: center;
  min-height: 11.6em;
  // the form is not aware of the padding on the parent container
  // so we substract it instead
  width: calc(100% - $size-small);
  border: none;
  padding: 0;
  visibility: hidden;

  transition-duration: var(--duration-global);
  transition-property: background-color;

  &:focus-within {
    background-color: var(--colour1-tertiary);
    visibility: visible;

    & .submit {
      opacity: 1;
    }
  }
}

.number {
  visibility: visible;
}

.submit {
  min-width: 6em;
  opacity: 0;
}
