discourse/plugins/discourse-templates/assets/stylesheets/discourse-templates.scss

.d-templates {
  .templates-filter-bar {
    display: flex;
    max-width: var(--modal-max-width);
    border-bottom: 1px solid var(--primary-low);
    margin-bottom: 1em;
    padding-top: 1px;
    padding-bottom: 1em;

    .select-kit {
      width: clamp(30%, 40%, 50%);
    }

    input {
      flex: 1;
      width: 100%;
      margin: 0 0 0 1em;
    }

    .close {
      margin-left: auto;
    }
  }

  .templates-footer {
    align-items: stretch;
    margin-top: 3px;
  }

  .templates-list {
    .template-item {
      padding-bottom: 1em;

      .template-item-title {
        display: flex;
        align-items: center;

        &:hover {
          background-color: var(--highlight-medium);
          cursor: pointer;
        }

        .template-item-title-text {
          max-width: 75%;
        }

        .actions {
          margin-left: auto;
        }
      }
    }
  }

  .template-item-title-text {
    font-weight: bold;
    margin-left: 0.5em;

    @include ellipsis;
  }

  .templates-content {
    background: var(--primary-very-low);
    padding: 0.75em;
    margin-top: 0.5em;
    box-sizing: border-box;

    p:first-of-type {
      margin-top: 0;
    }

    p:last-of-type {
      margin-bottom: 0;
    }
  }

  .template-item-source-link {
    color: var(--primary-high);
    font-size: var(--font-down-1);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: block;
    border-bottom: 1px solid var(--primary-low);

    &:hover {
      color: var(--tertiary);
    }
  }
}

#reply-control {
  .d-templates {
    position: relative;
    height: 100%;
    width: 100%;

    .modal-close {
      position: absolute;
      right: 0;
      margin: 0.5rem;
    }

    .templates-filter-bar {
      margin-right: 3rem;
    }
  }
}

.d-templates-modal {
  z-index: 9999;

  .content {
    margin-top: 10px;
  }

  .btn.link,
  .btn.local-dates {
    display: none;
  }
}

.mobile-view .d-templates-modal {
  min-height: 50vh;
  box-sizing: border-box;
  width: 100vw;
  max-width: var(--modal-max-width);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;

  .content {
    max-height: 50vh;
  }

  .d-editor-preview-wrapper {
    display: none;
  }
}

.template-topic-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 1em;

  .mobile-view & {
    font-size: var(--font-down-1);
  }
}