@import 'styles/mixins';

.dictionary {
  position: relative;
  transition: var(--transition);
  word-break: break-word;

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

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

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

.content {
  @include scrollbars;

  height: 100%;
  overflow-y: auto;
  border-radius: inherit;

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

.result {
  transition: var(--transition);

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

    & + & {
      .content {
        padding-top: 0;
      }
    }
  }

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

    & + & {
      .content {
        padding-top: 0;
      }
    }
  }
}

.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;
  }
}