// Meeting Visibility Controls Styles
.wemeet-visibility-control {
  padding: 24px;
  margin-bottom: 24px;

  // Main visibility selector
  .visibility-main-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;

    label {
      font-size: 14px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;

      &::before {
        content: "👁️";
        font-size: 16px;
      }
    }

    .visibility-select {
      width: 100%;
      max-width: 400px;
      padding: 12px 16px;
      border: 1px solid #d1dbe8;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      background: #ffffff;
      cursor: pointer;
      transition: all 0.2s ease;
      appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 12px center;
      background-repeat: no-repeat;
      background-size: 16px;
      padding-right: 40px;
      height: 46px;
      border-radius: 8px;

      &:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
      }

      &:hover {
        border-color: #d1d5db;
      }

      option {
        padding: 8px;
        font-weight: 500;
      }
    }
  }

  // Sub-controls container
  .visibility-sub-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: slideIn 0.3s ease-out;
  }

  // Roles selector
  .visibility-roles {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 8px;

      &::before {
        content: "👥";
        font-size: 14px;
      }
    }

  }

  // Users selector
  .visibility-users {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      display: flex;
      align-items: center;
      gap: 8px;

      &::before {
        content: "👤";
        font-size: 14px;
      }
    }
  }
}

// Animations
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive design
@media (min-width: 768px) {
  .wemeet-visibility-control {
    .visibility-sub-controls {
      flex-direction: row;
      gap: 24px;

      .visibility-roles,
      .visibility-users {
        flex: 1;
      }
    }
  }
}

// Custom scrollbar for multi-select
.visibility-roles select,
.visibility-users select {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f9fafb;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
    transition: background 0.2s ease;

    &:hover {
      background: #9ca3af;
    }
  }
}

// Loading state
.wemeet-visibility-control {
  &.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 2px solid #e5e7eb;
      border-top: 2px solid #6366f1;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}