@use "lib/viewport";

#reply-control
  .select-kit.dropdown-select-box.composer-actions
  .select-kit-header {
  border: 1px solid var(--tertiary-700);
  background: var(--secondary);

  &:hover {
    .d-icon {
      color: var(--accent-color);
    }
  }
}

#reply-control {
  background-color: var(--background-color);
}

#reply-control.hide-preview:not(.draft) {
  @include viewport.from(sm) {
    background: var(--d-content-background);
    border-top-right-radius: var(--d-border-radius);
    border-top-left-radius: var(--d-border-radius);

    .grippie {
      background: var(--tertiary-low);
      border-top-right-radius: var(--d-border-radius);
      border-top-left-radius: var(--d-border-radius);
    }

    .user-selector,
    .title-and-category {
      padding: 0 var(--spacing-inline-m);
      width: calc(100% - var(--spacing-inline-m) * 2);
    }

    .d-editor-button-bar {
      padding: 3px var(--spacing-inline-m);
      border: none;
    }

    .d-editor-input {
      padding: var(--spacing-inline-m);
    }

    &:has(.in-focus) .grippie {
      background: var(--tertiary);
    }

    .reply-area {
      padding-inline: 0;
    }

    .reply-to,
    .submit-panel {
      padding-inline: var(--spacing-inline-sm);
    }

    .d-editor-textarea-wrapper {
      border: 0;
      border-bottom: 1px solid var(--primary-low);
      border-radius: 0;

      &.in-focus {
        outline: 0;
      }
    }
  }
}

.d-editor-button-bar {
  .btn:hover,
  .toolbar-popup-menu-options.is-expanded {
    .discourse-no-touch & {
      background: var(--tertiary-very-low);
      color: var(--accent-color);

      .d-icon {
        color: inherit;
      }

      // to have parity with regular select-kit styling used elsewhere
      .select-kit-row {
        .d-icon {
          color: var(--primary-high);
        }

        &:hover {
          .d-icon {
            color: var(--primary);
          }
        }
      }
    }
  }

  .toolbar-popup-menu-options.is-expanded {
    border-radius: var(--d-border-radius);
  }
}

.discourse-no-touch .translation-selector-dropdown {
  .select-kit-header.btn-default {
    background: var(--background-color);
  }
}

#reply-control.composer-action-add_translation {
  .d-editor-preview .d-editor-translation-preview-wrapper {
    border-color: var(--d-sidebar-border-color);
  }

  .d-editor-preview .d-editor-translation-preview-wrapper__header {
    top: 6.5rem;
    padding: 0.25rem 0.75rem;
    background: var(--background-color);
    color: var(--accent-color);
    border-radius: var(--d-border-radius-large);
  }

  .topic-title-translator input {
    width: 47.25vw;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.6;
  }
}

@include viewport.until(sm) {
  .composer-open {
    body::after {
      height: 100vh;
      content: "";
      top: 0;
      bottom: 0;
      position: fixed;
      width: 100vw;
      left: 0;
      right: 0;
      background: black;
      z-index: calc(z("mobile-composer") - 1);
      user-select: none;
      animation: fade 0.3s forwards;

      @media (prefers-reduced-motion) {
        animation-duration: 0s;
      }
    }
  }

  .toggle-toolbar {
    display: none;
  }

  #reply-control {
    background: var(--secondary);

    .title-input {
      order: 1;
    }

    #reply-title {
      border: 0;
      padding: var(--space-3) 0;
      border-radius: 0;
      background: var(--secondary);
      font-size: var(--font-up-1);

      &:focus {
        outline: 0;
      }
    }

    .reply-area {
      padding-inline: var(--space-4);
    }

    .d-editor {
      &-textarea-wrapper {
        border: 0;

        &.in-focus {
          outline: 0;
        }
      }

      &-input {
        padding-inline: 0;
      }

      p[data-placeholder] {
        margin: 0;
      }

      &-button-bar {
        width: 100%;
        justify-content: space-around;
        flex-wrap: nowrap;
        overflow-x: scroll;
        position: absolute;
        bottom: var(--space-4);
        border: 1px solid var(--primary-low);
        border-radius: var(--d-border-radius);
        background: var(--secondary-very-high);
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
          display: none;
        }

        .btn {
          font-size: var(--font-up-1);
          color: var(--primary-high);

          &:not(a) {
            flex-shrink: 0;
          }
        }
      }
    }
  }
}