@use 'styles/mixins' as *;

.dictionary {
  position: relative;
  word-break: break-word;

  &:focus-within {
    @include focus-effect;
  }
}

.content {
  @include scrollbars;

  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  border-radius: inherit;

  &:focus-visible {
    outline: none;
  }
}

.result {
  flex-shrink: 0;

  &:last-child {
    flex-grow: 1;
  }

  &.isAllowed {
    background-color: var(--color--green--light);
  }

  &.isNotAllowed {
    background-color: var(--color--red--light);
  }
}

.resultContent {
  padding: var(--spacing--l);
}

.word {
  margin-bottom: var(--spacing--m);
  font-size: var(--font--size--h2);
  text-transform: uppercase;
}

.definitions {
  margin: 0;
  padding-inline-start: var(--spacing--l);
}

.definition {
  margin-bottom: var(--spacing--s);
  white-space: pre-wrap;

  &:last-child {
    margin-bottom: 0;
  }
}