@use "../../styles/mixins/scrollbar" as scrollbar;
@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;

.chat-setting {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 300px;

  @include theme() {
    background-color: get(bg-color-operate);
  }

  @include scrollbar.scrollbar-hidden;

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }

  &__title {
    font-size: 16px;
    font-weight: 500;

    @include theme() {
      color: get(text-color-primary);
    }
  }

  &__close {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;

    @include theme() {
      color: get(text-color-primary);

      &:hover {
        background-color: get(button-color-secondary-default);
      }

      &:active {
        background-color: get(button-color-secondary-active);
      }
    }
  }
}