@import 'styles/mixins';

.solver {
  --spacing: var(--spacing--xl);

  position: relative;
  margin: 0 var(--spacing);
  display: flex;
  flex-direction: column;

  @include media('<xl') {
    --spacing: var(--spacing--l);
  }

  @include media('<l', 'touch') {
    margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
  }

  @include media('<xs', 'touch') {
    margin-bottom: calc(1 * var(--spacing--m) + 2 * var(--spacing--l) + var(--button--icon--size));
  }
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--solver-column--width);
  gap: var(--spacing);
  height: 100%;
  margin: 0 auto;

  @include media('<l') {
    grid-template-columns: 1fr;
  }
}

.boardContainer {
  position: relative;
}

.board {
  margin: 0 auto;
}

.submitInput {
  display: none;
}

.column {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--solver-column--width);
  gap: var(--spacing);

  @include media('<l') {
    display: none;
  }
}

.results {
  box-shadow: var(--box-shadow);
}

.dictionaryContainer {
  flex: 0 0 auto;
  height: var(--dictionary--height);
  display: flex;
  flex-direction: column;
  background-color: var(--color--background--element);
  border: var(--border);
  border-radius: var(--border--radius);
  box-shadow: var(--box-shadow);
}

.dictionary {
  flex: 1;
  border-bottom: var(--border);
  border-top-left-radius: var(--border--radius);
  border-top-right-radius: var(--border--radius);
}

.dictionaryInput {
  flex: 0 0 auto;
  border-bottom-left-radius: var(--border--radius);
  border-bottom-right-radius: var(--border--radius);
}

.bottomContainer {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

.bottomContent {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);
  margin: var(--spacing) auto;
  min-width: 0;
}

.controls {
  width: 100%;
}

.emptyState {
  margin-top: var(--spacing);
}