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

.video-call-picker {
  &__button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px 6px;
    border: none;
    background: transparent;
    transition: background-color 0.5s ease;
    border-radius: 4px;
    outline: none;

    @include theme() {
      &:hover {
        background-color: get(button-color-secondary-hover);
      }

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

    &:focus {
      outline: none;
    }

    &--disabled {
      opacity: 0.5;
      cursor: not-allowed;
      user-select: none;
      pointer-events: none;
    }
  }

  &__icon {
    transition: color 0.2s ease;

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

// Global styles for dialog (non-module)

.group-call-dialog {
  background: white;
  border-radius: 8px;
  max-width: 500px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 15%);

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