.#{$n}-chat__options {
  display: flex;
  position: relative;
  flex: 0;
  align-items: center;
  justify-content: flex-end;
  gap: $spacer * 0.5;
  width: 100%;
  padding: $spacer * 0.25;
  border-top: $thin-border solid $grey-b;
}

.#{$n}-chat__options-item--left {
  margin-right: auto;
}

.#{$n}-chat__options__button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: $spacer * 0.25;
  padding: $spacer * 0.25 $spacer * 0.5;
  border-radius: $borderradius-small;
}

.#{$n}-chat__options__button .#{$n}-icon {
  flex: 0 0 $iconsize-small;
  width: $iconsize-small;
  height: $iconsize-small;
}

.#{$n}-chat__options__button .#{$n}-icon svg {
  width: 100%;
  height: 100%;
}

.#{$n}-chat__options__button .#{$n}-icon path {
  fill: currentcolor;
}

// CONTEXT MENU
// ------------
.#{$n}-options__menu {
  display: none;
  position: absolute;
  right: $spacer * 0.5;
  bottom: calc(100% + (#{$spacer} * 0.5));
  flex-direction: column;
  gap: $spacer * 0.25;
  max-width: $spacer * 15;
  max-height: $spacer * 20;
  margin: 0;
  padding: $spacer * 0.5;
  transform: scaleY(0) translateY($spacer * 5);
  transform-origin: 100% 100%;
  transition:
    transform 0.2s ease-in-out,
    opacity 0.2s ease;
  border: $thin-border solid $grey-b;
  border-radius: $borderradius-small;
  opacity: 0;
  background-color: $white;
  box-shadow: $boxshadow-soft;
  list-style: none;
}

.#{$n}-options__menu.#{$n}-transition--visible {
  display: flex;
}

.#{$n}-options__menu.#{$n}-transition--in {
  transform: scaleY(1) translateY(0);
  opacity: 1;
}

.#{$n}-options__menu__item {
  transition: opacity 0.1s 0.1s ease;
  opacity: 0;

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

.#{$n}-options__menu.#{$n}-transition--in .#{$n}-options__menu__item {
  opacity: 1;
}

.#{$n}-options__menu .#{$n}-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: $spacer * 10;
  border-radius: $borderradius-small;
}

// OPTIONS DIALOG
.#{$n}-options {
  display: none;
  position: absolute;
  z-index: 10;
  right: $spacer * 0.5;
  bottom: calc(100% + (#{$spacer} * 0.5));
  flex-direction: column;
  width: calc(100% - #{$spacer});
  max-width: $spacer * 15;
  margin: 0;
  padding: 0;
  transition:
    transform 0.2s ease-in-out,
    opacity 0.2s ease;
  border: $thin-border solid $grey-b;
  border-radius: $borderradius-small;
  opacity: 0;
  background-color: $white;
  box-shadow: $boxshadow-soft;
  list-style: none;
}

.#{$n}-options--left {
  right: initial;
  left: $spacer * 0.5;
}

.#{$n}-options--right {
  right: $spacer * 0.5;
}

.#{$n}-options--top {
  top: initial;
  bottom: calc(100% + $spacer * 0.5);
  transform: scaleY(0) translateY($spacer * 5);
  transform-origin: 100% 100%;
}

.#{$n}-options--bottom {
  top: calc(100% + $spacer * 0.5);
  bottom: initial;
  transform: scaleY(0) translateY(-$spacer * 5);
  transform-origin: 0 0;
}

.#{$n}-options__dialog.#{$n}-transition--visible .#{$n}-options {
  display: flex;
}

.#{$n}-options__dialog.#{$n}-transition--in .#{$n}-options {
  transform: scaleY(1) translateY(0);
  opacity: 1;
}

.#{$n}-options__body {
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.5;
  max-height: $spacer * 16;
  transition: opacity 0.1s 0.1s ease;
  opacity: 0;
}

.#{$n}-options__dialog.#{$n}-transition--in .#{$n}-options__body {
  opacity: 1;
}

.#{$n}-options__title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: calc(100% - #{$buttonsize} - (#{$spacer} * 0.5));
  margin: 0;
  padding: $spacer 0 0 $spacer;
  color: $brand2;
  font-size: $fontsize-default;
  font-weight: $fontweight-bold;
}

.#{$n}-options__close {
  display: flex;
  position: absolute;
  top: $spacer * 0.5;
  right: $spacer * 0.5;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: $buttonsize;
  height: $buttonsize;
  color: $interaction;
  font-size: 0;
}

.#{$n}-options__close .#{$n}-icon {
  flex: 0 0 $iconsize-small;
  width: $iconsize-small;
  height: $iconsize-small;

  path {
    fill: currentcolor;
  }
}

.#{$n}-options__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: $spacer * 0.5;
}

.#{$n}-options__wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: $spacer * 0.5;
  width: 100%;
  padding: 0 $spacer;
  overflow: auto;

  // FF FIX
  &:last-child::after {
    content: '';
    display: block;
    flex: 0 0 $spacer * 0.5;
    width: 100%;
    height: $spacer * 0.5;
  }
}

.#{$n}-options__wrapper h3 {
  margin: 0;
  color: $brand2;
  font-size: $fontsize-medium;
  font-weight: $fontweight-bold;
}

.#{$n}-options__description {
  display: block;
  width: 100%;
  padding: 0 $spacer;
  font-size: $fontsize-medium;
}

.#{$n}-transcript__input {
  width: 100%;
  min-height: $buttonsize;
  padding: $spacer * 0.5;
  transition: padding $transition;
  border: $thin-border solid $grey-b;
  border-radius: $borderradius-small;
  font-size: $fontsize-default;

  &:focus-visible {
    border: $thin-border solid $grey-b;
  }

  @include stylePlaceholder {
    overflow: visible;
    color: $grey-c;
    line-height: $spacer;
  }
}

.#{$n}-options__actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
}

.#{$n}-options__actions .#{$n}-button {
  width: 100%;
}